YouTubeの埋め込み動画を自動再生かつループ再生させる

JSを使わずにiframeだけでYouTubeの埋め込み動画を自動再生かつループ再生させて、背景の動画をYouTubeの動画にする方法です。

動画の自動再生

動画を自動再生するためには、パラメータにautoplay=1, mute=1, playsinline=1を設定します。

https://www.youtube.com/embed/<video_id>?autoplay=1&mute=1

動画のループ再生

パラメータにloop=1, playlist=<video_id>を設定することで動画がループ再生されるようになります。

https://www.youtube.com/embed/<video_id>?loop=1&playlist=<video_id>

動画の自動再生&ループ再生

上記の２つを組み合わせることで動画を自動再生かつループ再生させることができます。

https://www.youtube.com/embed/<video_id>?autoplay=1&mute=1&playsinline=1&loop=1&playlist=<video_id>

コントロールの非表示

さらにcontrols=0を設定することでプレーヤー コントロールを非表示にできます。

ショートカットの無効化

また、disablekb=1を設定することでキーボードによる操作を無効化する事ができます。

背景として使用する例

上記を組み合わせることでYouTubeの埋め込み動画を背景として使用できます。

https://www.youtube.com/embed/<video_id>?autoplay=1&mute=1&playsinline=1&loop=1&playlist=<video_id>&controls=0&disablekb=1

その他パラメータ

その他パラメータには、こちらを参考にしてください。

ループ時に再読み込みが発生するのが気になる場合は、IFrame Player APIを使って、JSでループ再生処理を実装することで回避することができます。