動画の埋め込みをレスポンシブ対応する方法
●動画の埋め込み
YouTubeの埋め込みたい動画URLへ移動
↓
動画下の共有から「埋め込む」を選択
↓
ポップアップが表示されるので、右下の「コピー」をクリックしてコードをコピー
↓
以下の内容を埋め込みたい場所に記述
<div class="youtube"> ＞＞＞コピーした「動画の埋め込みのコード」をここにペースト＜＜＜ </div>
CSSの設定
aspect-ratio を使用
.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}
Youtube動画の比率 16：9 を「16 / 9」を指定。
padding-top ハックを使用
※aspect-ratio未対応の環境用
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
※親要素のサイズいっぱいに表示されるため、大きすぎる場合はさらに「div」などで囲って幅や位置の調整が必要です。
関連動画を表示
YouTube の動画埋め込みで表示される関連動画や次の動画を非表示にする方法を紹介します。
以前は youtube パラメーターに ?rel=0 を指定することで、関連動画を非表示にすることができましたが、2018年9月以降の YouTube の仕様変更により、動画再生後の関連動画表示・非表示の制御ができなくなりました。
現在は、パラメーターの値によって次の動作をします。
0 の場合 ?rel=0
動画をアップしたチャンネル内から関連動画表示
1 の場合 ?rel=1
外部のチャンネルから関連動画を表示
埋め込んだYouTube動画を自動再生する方法
埋め込んだYouTube動画を自動再生するには、下記2つのHTML属性を利用します。
autoplay：指定したファイルを自動再生する属性
mute：指定したファイルをミュート(消音)状態にする
YouTube動画はミュート設定しないと自動再生されないという特徴があるので、autoplay属性と一緒にmute属性も指定します。
指定場所は、iframe内でYouTube動画の場所を指定しているsrc属性内にクエリとして設定します。
例）
src=”https://www.youtube.com/embed/●●●●●●?autoplay=1&mute=1″
※クエリを入力するときは、YouTube動画の後ろに「?」を挟んで入力します。属性を複数指定するときは「&」で挟んで入力します。
YouTube動画をループ再生
YouTube動画をループ再生するには、下記の属性を利用します。
loop：指定した動画をエンドレス再生する
playlist：再生する動画のIDを指定する
playlistで指定した動画をloop属性を使ってループ再生できます。指定方法は、iframeのsrc属性に指定しているURLの最後に指定します。
例）
src=”https://www.youtube.com/embed/●●●●●●?loop=1&playlist=kzjbV7dxm7c”
