YouTube動画の埋め込み方法＆レスポンシブ対応。ループも1文いれるだけ！

最近動画を取り入れられているサイトも多いですよね。今回、YouTube動画の埋め込み方とループのさせ方をまとめてみました。埋め込み動画の再生後、関連動画を出したくない場合は、ループさせるのが効果的です！

YouTube動画の埋め込み方
レスポンシブにする方法
再生後、関連動画を出さない２つの方法

YouTube動画の埋め込み方

Step1 youtubeから埋め込みたい動画の共有ボタンをクリック

Step2 埋め込みコードが表示されるので、そのままコピーをクリック

Step3 あとは埋め込みたいところにそのままコピぺするだけで完成！

レスポンシブにする方法

動画埋め込み時<iframe>内のwidthとheightの値を変えることでサイズを変えられます。(widthは100%表記で可変できるのですが、高さはうまくいかずアスペクト比がうまくいきません。)このままだと幅と高さが固定ですよね。次はレスポンシブ対応にしていきたいと思います。

<div class="youtube">
  <iframe>ここに動画のコピペ</iframe>
</div>

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;　/*width:height=16:9 のアスペクト比。paddingで高さをとります*/
}

.youtube iframe{
position: absolute;
top: 0; /*paddingでとった高さの所にいきます*/
left: 0;
width: 100% !important;　/*埋め込み時、iframeタグ内のwidth値を変えるのが面倒な場合は記載すること*/
height: 100% !important;
}

iframeタグをdivで囲って、上記のコードをcssに貼ったらOK。他のアスペクト比に保ちたい！という場合は下記からどうぞ。

https://tools.m-bsys.com/calculators/ratio.php

WordPressの場合のレシポンシブ対応方法

子テーマにCSSを追加することで対応できます。
❶ダッシュボード→外観→カスタマイズをクリック

❷『追加CSS』をクリック。先ほどのコードを貼ります。後は公開をクリック。

❸後は動画埋め込み時のコードを<div class=”youtube”></div>で囲えばOK。

WordPressの場合、プラグインでclassを作っておくと便利！

プラグイン『AddQuicktag』がとても便利。よく使うようなボーダーなども上記のように追加CSSを登録したのち、このプラグインでclassを登録しておくと楽です！

❶ダッシュボード→プラグイン→AddQuicktag→設定

❷入力欄に記入。
・自身が分かりやすいラベル名
・追加CSSで登録したclass名(タグは必要に応じてspan、divなど変えます)
・アクセスキーの所は空けていて大丈夫です。
・一番右側のチェックをクリックで全てにチェックしてくれます。

後は変更を保存をクリック。
これで記事作成時、Quicktagsのタブに登録したラベル名が表示されます。

備忘録…

テーマの関係か、色々プラグインを試してみた結果か、他の方とちょっと仕様が違うみたいなので…個人的な備忘録です。やり方の流れ自体は、「投稿画面で動画コードを貼ってドラッグでそれを選択→ラベルを選択してクリックで完了」と同じです。

Step１

❶新規の入力ブロック( + をクリックする)を作って(※)、『カスタムHTML』を選択。
※入力したいところに適当にクリックして動画コードをコピぺでもカスタムHTMLに自動で立ち上がる。

Step２

❶動画コードをコピペして、❷変換ボタンをクリック。❸クラシカル版の段落をクリック。

Step３

❶埋め込み動画のコードが、ビジュアルとして表示されるので、動画をクリックして選択(→周りが青く表示される)。
❷Quicktagsタブから、YouTube用のラベルを選択。これで完了。

再生後、関連動画を出さない２つの方法

方法１投稿されている動画が１つだけのチャンネルをつくる方法

❶投稿動画が１つだけのアカウントをつくる
❷YouTube動画埋め込み時、URLの一番後ろが動画IDなので、動画IDの後ろに『 ?rel=0 』をいれて、同じチャンネルから関連動画が選択されるようにする
→関連動画が他にないため、再生後停止します。

参照：YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

<iframe width="560" height="315" src="https://www.youtube.com/embed/ejpTPfdxrnI?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

方法２再生ループさせることで、動画が停止しないので関連動画がでない方法

動画IDの後ろに『 ?loop=1&playlist=動画ID 』を入れると音がある場合も無音でループし続けます。
※この場合、停止させると関連動画が表示されます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/ejpTPfdxrnI
?loop=1&playlist=ejpTPfdxrnI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>