CSSでYouTube動画の埋め込みをレスポンシブ対応にする方法

WebサイトにYouTube動画を埋め込み、CSSを使ってモバイルからデスクトップまであらゆるデバイスで完全にレスポンシブ表示させる方法を解説します。

YouTubeから動画の埋め込みコードをコピーすると、次のような <iframe> タグが取得できます。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/uga8GWzdv3c"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

残念ながら、iframeはブラウザ上で正しいアスペクト比を保って表示するために固定の幅と高さが必要です。そのため、iframeは初期状態ではレスポンシブデザインとの相性が良くありません。

しかし、iframeを親コンテナで囲むことで、動画の埋め込みを簡単にレスポンシブ対応させることができます。

<div class="youtube-video-container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/uga8GWzdv3c"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

続いて、CSSでこの動画コンテナにスタイルを適用しましょう。

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

アスペクト比の計算方法

padding-top に指定されている 56.25% という数値について不思議に思った方もいるかもしれません。この値は、YouTube動画の標準的なアスペクト比である16:9に基づいて算出されたものです。

動画コンテナをレスポンシブにするための正確なpaddingの値を求めるには、「高さの値が幅の値に対して何%に相当するか」を計算するだけでOKです。

9 ÷ 16 × 100 = 56.25%

つまり、9は16の56.25%に相当します。

同様に、埋め込む動画のアスペクト比が4:3の場合は、次のように計算します。

3 ÷ 4 × 100 = 75%

このように、動画の比率に応じてpaddingの値を変えることで、どんなアスペクト比の動画にも対応できます。

よりシンプルな方法：aspect-ratioプロパティ

なお、近年のモダンブラウザでは、CSSの aspect-ratio プロパティを使うことで、疑似要素やpaddingによるハックを使わずに、より直感的にアスペクト比を指定できます。

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

古いブラウザへの対応が必要ない場合は、こちらの方法のほうがコードが簡潔になり、意図も分かりやすくなります。プロジェクトの要件に合わせて使い分けると良いでしょう。