上の動画のYouTubeを埋め込むのに利用したパラメーター
autoplay | 自動再生 |
mute | ミュート |
controls | ボタンの表示 |
loop | ループ再生 |
playlist | ループ再生のプレイリスト |
以下のコードを埋め込んでいます。
<div class="youtube"><iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
「埋め込みブロック」でもYouTube を埋め込むことができますが、自動再生などそ指定する場合、「カスタムhtml」ブロックを利用します。
YouTubeのパラメーター
YouTubeを埋め込む時に、URLの後ろにパラメーターを付けることで、YouTubeを自動再生を可能にしたり、リピート再生やミュート再生、動画開始時間や終了時間の指定もできます。
?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E
パラメーターの説明
autoplay=1 | 自動再生 |
mute=1 | ミュート |
controls=1 | ボタンの表示 |
loop=1 | ループ再生 |
playlist=ID | ループ再生のプレイリスト |
modestbranding=1 | Youtubeのロゴの非表示 |
「embed/」の後がIDになります。
複数のパラメーターを指定する場合「&」で繋ぎます。
?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E
WordPressにYouTubeを埋め込むHTML コード、パラメーターについては、下のページに詳しく記載しています。そちらも参考にしてみてください。
パラメーターとその役割については下のリンクに詳しく記載しています。
動画の「埋め込みコード」をコピーして、投稿編集の「カスタムhtmlブロック」に貼ります。
これで、ブログでYouTubeが再生できます。
YouTubeの「埋め込みコードをコピー」
投稿編集画面で「カスタムhtmlブロック」を選択
「カスタムhtml」ブロックに「埋め込みコード」を貼る
<iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E"
width=”320″ | 横320px |
height=”560″ | 高さ560px |
embed/3pYAKzED09E | IDは3pYAKzED09E |
表示されるサイズによってはミュートボタンが表示されない場合があるので、表示されるように、パラメーター「controls」を使います。
上記にあるパラメーターを「src=”https://www.youtube.com/embed/~」の後に追加します。
<iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
赤文字が追加したパラメーターです。これで、「自動再生」「ミュート再生」「ループ再生」「ボタンの表示あり」になります。
autoplay=1 | 自動再生 |
mute=1 | ミュート |
controls=1 | ボタンの表示 |
loop=1 | ループ再生 |
playlist=ID | ループ再生のプレイリスト |
次の2つの手順でショート動画の縦横比を 9:16 にします。
<div class="youtube">
~</div>
で囲む<div class="youtube">
~</div>
で囲む<div class="youtube"> </div>
<div class=”youtube”>~</div>で囲むと次のようになります。
<div class="youtube"><iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
YouTubeのショート動画を埋め込む時に、通常のYouTubeの比率(横長)になってしまう場合、動画が縦長(9:16)になるように指定します。
/*ショート動画を縦型に*/.youtube iframe { position: relative; aspect-ratio:9 /16; / } .youtube .video { height: 100%; margin: 0 auto; overflow: visible; padding-bottom: 0; width: 300px; /* ビデオ横幅 */}
コードの説明
aspect-ratio:9 /16 | アスペクト比(ビデオの横/縦比) |
margin: 0 auto | 横方向は中央になるようにautoとする |
overflow: visible | 動画が枠よりオーバーした時は枠からはみ出す |
overflow: hidden | 動画が枠よりオーバーした時は枠に合わせてカットされる |
overflow: scroll | スクロールバーが常に表示され、枠に合わせてカットされ表示される |
ディスクトップで閲覧した場合、ショート動画だと横幅が空くので、2カラムしてショート動画を表示します。ブロックの
「カラム」を検索→利用したいカラムを選ぶ
左に画像、右に動画(カスタムhtml)を選択
2カラムで片方にショート動画を表示させた場合は次のように表示されます。
2カラムにした場合、モバイルでは1カラムで表示されます。左の画像が上へ、右の動画が下になり、2カラムから1カラムになります。