従来のYoutube動画の埋め込み方法（padding-top）

これまでは、iframeに親要素を作り、padding-top: 56.25%; or padding-top: calc(100% * 16 / 9); を指定することで、iframe を position: absolute; で絶対配置にしていました。

<div class="wrapper">
  <iframe src="動画URL" ></iframe>
</div>

.wrapper {
  position: relative;
  padding-top: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

padding-topは使わず16:9でYoutube動画を埋め込む方法（aspect-ratio）

2021年頃あたり？から aspect-ratio を使うだけで、16:9のアスペクト比で固定されます。

iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
}

そして気になるのが、対応ブラウザですよね。

aspect-ratio は現在、全モダンブラウザ（最新版）で使えます。

Can I use - aspect-ratio

これが新時代ですね💡