アスペクト比の求め方で画像サイズからアスペクト比を計算する方法を紹介しましたが、今度はiframeをCSSのみでレスポンシブに対応する方法があります。

動画のアスペクト比がわかっていれば計算は簡単です。
16:9で横幅合わせの場合は縦の比率を求めればいいので9 / 16 => 0.5625 * 100 = 56.25(%)となります。

<div class="frame">
  <iframe class="frame-container" src="youtubeとかvimeoのembed url"></iframe>
</div>

HTML側を上記のように親要素を設け、子要素にiframeを記述します。

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

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

CSSを上記のようにすることで16:9のiframeをレスポンシブ対応にすることができます。
原理としては親要素の横幅に対してpadding-topを56.25%を空けることで、常に16:9の空間ができるようになります。

そしてiframeを絶対配置にして親要素のサイズにしてあげれば16:9のレスポンシブを自動的に行うことができます。

よく使うアスペクト比

paddint-topで使う場合は100を掛けてパーセントにして下さい。

16:9
縦を求める場合: 9 / 16 = 0.5625
横を求める場合：16 / 9 = 1.7777….

4:3
縦を求める場合: 3 / 4 = 0.75
横を求める場合：4 / 3 = 1.3333….

3:2
縦を求める場合: 2 / 3 = 0.6666….
横を求める場合：3 / 2 = 1.5

黄金比(1:1.618)
縦を求める場合: 1.618 / 1 = 1.618
横を求める場合：1 / 1.618 = 0.6180469…

白銀比(1:1.414)
縦を求める場合: 1.414 / 1 = 1.414
横を求める場合：1 / 1.414 = 0.70721357…