iframe(埋め込みタグ)のレスポンシブ、aspect-ratioプロパティが便利

アスペクト比を定義できるCSSのプロパティがIE以外のブラウザでサポートされたので使ってみます。

アスペクト比とは
これまでのiframe(埋め込みタグ)のレスポンシブ（IE対応）
- aspect-ratioプロパティでレスポンシブ
- 参考サイト

アスペクト比とは

縦の長さと横の長さの比率のこと。
例えば、640（横）×480（縦）＝640：480→4：3
アスペクト比は、縦横比ともいいます。

動画は16 / 9に、黄金比は1.618 / 1です。

See the Pen by michiyo yamada (@yamada3) on CodePen.

これまでのiframe(埋め込みタグ)のレスポンシブ（IE対応）

	<div class="iframe-warp">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>

.iframe-warp {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  margin: 2.0em auto;
}
.iframe-warp iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

aspect-ratioプロパティでレスポンシブ

.iframe-warp {
  margin: 2.0em auto;
}
.iframe-warp iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

aspect-ratio: 16 / 9; ←たったこれだけで幸せになれますww

画像（img）には、object-fit: cover;を付ければ縦長の画像もいちいち計算しなくてすみますね。

img {
  aspect-ratio: 1.618 / 1;//黄金比
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;
}

img {
  aspect-ratio: 1 / 1;//正方形
  width: 100%;
  height: 100%;
  object-fit: cover;
}