YouTubeビデオ埋め込みをCSSでレスポンシブにする方法

CSSを使用して、YouTube動画をウェブサイトに埋め込み、モバイルからデスクトップデバイスまで完全にレスポンシブにする方法を学びましょう。

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%;
}

アスペクト比の計算

56.25%が何であるか疑問に思っていますか？ パディングトップは約ですか？これは、YouTube動画のアスペクト比である16/9に基づいています。

ビデオコンテナをレスポンシブにするための正確なパディング値を取得するには、高さの値が幅の値の何％であるかを調べる必要があります：

9/16 * 100 =56.25％

9は56.25％ の16。

埋め込まれた動画のアスペクト比が4：3の場合、動画コンテナの上部のパディングは次のように計算されます。

3/4 * 100 =75％

など。