YouTubeの動画をサイトの背景として使用する方法

この記事の前提条件

対象: HTML・CSS・JavaScript(全モダンブラウザ対応)
難易度: ★★★
所要時間: 約20分

トップページのファーストビューいっぱいに動画をループ再生させる演出、印象的なサイトでよく使われますよね。YouTubeにアップロード済みの動画をそのまま背景として使う方法を紹介します。

⚠️ 自動再生には「音声なし(ミュート)」が必須

現在の主要ブラウザは、ユーザーの操作なしに音声付きの動画を自動再生することをブロックしています。ページを開いた瞬間から動画を再生させたい場合、必ずミュート状態で自動再生する必要があります。これは仕様変更ではなく、以前から続く主要ブラウザ共通のポリシーです。「自動再生されない」と困っている場合は、まずミュート設定を確認してください。

目次非表示

HTML: YouTube動画のiframeを配置する
CSS: 画面いっぱいに拡大し、はみ出た部分を隠す
実務での注意点: モバイルでは動画背景を諦める選択肢も検討する
まとめ

目次へ

HTML: YouTube動画のiframeを配置する

動画を囲む親要素を用意し、その中にYouTubeの埋め込みiframeを配置します。パラメータで自動再生・ループ・コントロール非表示などを制御します。

<div class="video-bg">
  <iframe
    src="https://www.youtube.com/embed/動画ID?autoplay=1&mute=1&loop=1&playlist=動画ID&controls=0&showinfo=0&rel=0"
    frameborder="0"
    allow="autoplay"
  ></iframe>
</div>

それぞれのパラメータの役割は次の通りです。

autoplay=1: 自動再生する
mute=1: ミュートにする(自動再生に必須)
loop=1 + playlist=動画ID: ループ再生する(この2つはセットで指定しないとループしない)
controls=0: 再生バーなどの操作パネルを非表示にする

⚠️ ループには「同じ動画IDのplaylist指定」が必要

意外と見落としがちなのが、loop=1だけでは1本の動画がループしてくれない点です。YouTube側の仕様上、playlistパラメータに同じ動画IDを指定して初めて、その動画1本だけのループ再生になります。loop=1を指定したのに最後で止まってしまう場合は、このplaylist指定漏れが原因です。

CSS: 画面いっぱいに拡大し、はみ出た部分を隠す

.video-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;  /* 16:9の比率を維持 */
  min-height: 100vh;
  min-width: 177.78vh; /* 16:9の比率を維持 */
  transform: translate(-50%, -50%);
}

動画の縦横比(16:9)を保ったまま、画面のどんな比率でも隙間なく埋まるように、vw(画面幅基準)とvh(画面高さ基準)の両方でサイズを指定し、はみ出た分をoverflow: hidden;で隠す、という考え方です。object-fitが使えるvideoタグと違い、iframeではobject-fitが効かないため、この計算による力技が必要になります。

実務での注意点: モバイルでは動画背景を諦める選択肢も検討する

スマホの回線環境によっては、動画の読み込みに時間がかかり、表示速度の悪化やギガ数の消費につながります。また一部のモバイルブラウザでは、そもそも自動再生の挙動が不安定なこともあります。スマホ表示時はメディアクエリで動画を非表示にし、代わりに動画から切り出した1枚の静止画を背景として表示する、という実装もよく使われる現実的な落としどころです。

💡 表示速度をより重視するなら、自前でホスティングしたvideoタグも検討を

YouTube側の埋め込みは、YouTube自体の読み込みスクリプトが挟まる分、表示速度の面では不利です。すでにYouTubeにアップロード済みの動画資産を再利用したい場合は本記事の方法が便利ですが、表示速度を最優先するなら、動画ファイルを自前のサーバーに置いて<video autoplay muted loop playsinline>タグで直接再生する方法の方が、読み込みが軽く済みます。ただしその場合はサーバーの転送量・容量を自分で管理する必要がある、というトレードオフも理解しておいてください。

まとめ

自動再生にはmute=1が必須。主要ブラウザ共通のポリシーで、音声付きの自動再生はブロックされる
ループ再生にはloop=1だけでなく、同じ動画IDのplaylist指定もセットで必要
CSSはvw・vhを組み合わせ、16:9の比率を保ったまま画面を埋める
スマホでは動画を非表示にし静止画に切り替える、表示速度重視なら自前ホスティングも検討する