はじめに
ブラウザにてYouTubeの動画を背景として表示する方法を、簡単に解説していこうと思います。
動画の表示については、iframeを用いたやり方となります。
背景として扱いたいので、
・動画は自動再生する
・動画が終了したら同じ動画をループ再生する
・ユーザの操作を禁止する
・動画の枠は丸める
このような要件で実装していきます。
ソースコード
See the Pen Untitled by 島尻 亮汰 (@ryota-shimajiri) on CodePen.
レスポンシブ対応
まずはこちら、
CSS
aspect-ratio: 16/9;
親要素からアスペクト比を直接指定して、レスポンシブ対応を行っています。
CSS
padding-top: 56.25%;
こちらでも同じことができますが、個人的にはaspect-ratioの方が直観的に分かりやすいかなーと思います。
ちなみにIEのサポートが2022年6月で終了したので、今後はaspect-ratioが本格的に使われるようになるかもしれません。
自動再生
再生動画のURLのクエリパラメータに、
autoplay=1 と mute=1を指定することで自動再生が行えます。
?autoplay=1&mute=1
ループ再生
再生動画のURLのクエリパラメータに、
loop=1 と playlist={video_id}を指定することでループ再生が行えます。
video_idはこのURLの場合、一番最後にある「JjLUn3JAqOU」となります。
https://www.youtube.com/embed/JjLUn3JAqOU
ユーザ操作を禁止
controls=0を設定するとシークバー（コントロールバー）を非表示にできます。
さらにdisablekb=1でキーボード操作を無効化します。
controls=0&disablekb=1
全て指定するとこのようになります。
HTML
src="https://www.youtube.com/embed/JjLUn3JAqOU?autoplay=1&mute=1&playsinline=1&loop=1&playlist=JjLUn3JAqOU&controls=0&disablekb=1"
さらにCSSでポインターイベントも無効にします。
CSS
pointer-events: none;
動画の枠を丸める
要素の境界の外側の角を丸めていきます。
こちらもCSSで一行で実装できます。
CSS
border-radius: 8px;
以上で完成です。
参考