38
Help us understand the problem. What are the problem?

posted at

updated at

Organization

YouTubeの動画をレスポンシブ対応して背景として埋め込んでみた

はじめに

ブラウザにて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;

以上で完成です。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
38
Help us understand the problem. What are the problem?