【CSS】Youtube動画の埋め込みにpadding-topは使わない時代 #CSS

「なんでYoutubeの埋め込みごときに、padding-top でダラダラと書かないといけないの？」と思ったことありませんか？

僕はずっと思ってました（ ; ; ）

今回はそれを覆すプロパティを紹介します。

従来の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%;
}

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

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

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

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

これが新時代ですね💡