いくつかの CSS テクニックを使って、以下のように記述する。

CSS ファイル:

/* iframe を囲むボックス(親ボックス)に対する指定 */

.youtube {
  position : relative;
  width : 100%;
  padding-top : 56.25%;
}

/* iframe そのものに対する指定 */

.youtube iframe {
  position : absolute;
  top: 0;
  right: 0;
  width : 100%!important;
  height : 100%!important;
}

HTML ファイル:

<div class="youtube">
  <iframe width="560" height="315" src="….." …. >
</div>

動作の概要

外側の div.class ボックスで 16:9 の縦横比を保った横幅いっぱいのスペースを確保し、内側の <iframe> で外側の div.class ボックスのサイズを取得して動画を表示する。

横幅いっぱいに配置する場合

上記の例は YouTube の動画を、置かれたブロックの横幅いっぱいになるようレスポンシブ表示する。

16:9 のアスペクト比は 100% : 56.25% であることから、この数字を padding-top に用いている。パーセント指定の場合は height であっても width の値に対して何パーセントか、という意味になる。

内部の iframe によるボックスは position : absolute; なので、通常フローからははずれる(CSS2.1 Specifications : 9.3)。したがって親ボックスから見ると、中身は空なので、中身の height は 0 である。

この場合この iframe のボックスの containing block は、親ボックスたちのうち、position が absolute, relative, fixed のどれかを指定された直近の親である。div.youtube のボックスに position: relative; を指定しているのは、iframe ボックスの containing block に確実になるためである。

div.youtube のボックスは、中身が(指定により)空(扱い)なので、自身の padding-top (この場合) のみが内容となる。今 div.youtube ボックスの大きさは padding edge なので、これにより、横幅を基準とした 16:9 (= 100% : 56.25% ) の縦横比を保った「スペース」が、div.youtube ボックスにより確保されることになる。

内部の iframe は、position : absolute; なので、containing block (= div.youtube ボックス) の top:0, right:0 (=右上) を基準として配置される。横幅 width は 100% が必ず適用され、これは containing block の幅となる。height も 100% で containing block の高さとなる。この width, height は !important 指定があるため、iframe タグの中に指定された値は無視されて、CSS で指定した値(containing block の 100%)となる。

以上により、そのときに横幅に合わせて、縦横比を保ったままレスポンシブに伸縮することを実現できる。

左右にややスペースをとって配置するとき

左右にややスペースを取って配置するときは、パーセントの値を調整する。

例: 横幅を 90% にしたい(=右5%減少、左5%減少)。

100% x 0.9 = 90%, 56.25% x 0.9 = 50.625%

/* iframe を囲むボックス(親ボックス)に対する指定 */

.youtube {
  position : relative;
  width : 90%;
  padding-top : 50.625%;
}

/* iframe そのものに対する指定 */

.youtube iframe {
  position : absolute;
  top: 0;
  right: -5%;
  width : 100%!important;
  height : 100%!important;
}

HTML ファイル:

<div class="youtube">
  <iframe width="560" height="315" src="….." …. >
</div>