White Space
WebLife

【CSS】Youtube 埋め込みなどの iframe 動画をレスポンシブ対応する方法

  • CSS

Youtube などの動画サイトにある 16:9 の比率の動画を埋め込んだ時に、レスポンシブ対応する方法です。

コード

iframe を.movieクラスを付与した要素でラップします。

HTML

<div class="movie">
  <iframe .../>
</div>

CSS

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe を absolute にすると.movie要素の高さが0になるため、要素が消えてしまいます。

ですが padding-top を指定することで、その高さの分 iframe が表示されるようになります。

なぜ padding-top が 56.25% なのか？

padding-top の％指定は、要素の横幅に対する割合で計算されます。

例を挙げると、横幅 100px の要素に対して、padding-top を 50% に指定した場合、100px の 50% 分なので、padding-top は 50px になります。

今回の埋め込み動画の場合は、縦横比が 16:9 となっていることが多いです。

56.25% という数値は、9 / 16 = 56.25 から算出されています。横幅 16 に対して縦幅が 9 になるように計算されるので、要素の width が可変した分、縦幅もぴったり 16:9 の割合で可変してくれます。

昔よくあった比率である 4:3 にしたければ、3 / 4 = 75% に指定すると良いでしょう。

padding-top: 75%;