CSSだけでyoutubeを縦横比固定で埋め込む

レスポンシブでyoutubeの縦横比を固定したいことはよくあると思います。
今まではなにかとめんどくさいことをしないといけなかったのですが、CSSの新しいプロパティaspect-ratioの登場によってとても簡単に実装できるようになりました。

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

たったこれだけです。
幅は任意の幅で結構です。
幅に合わせてaspect-ratioが勝手に高さを変えてくれます。

aspect-ratioの使い所

このaspect-ratioですが、もちろんyoutubeの埋め込み以外でも便利に使うことができます。
例えば下のようなレイアウト。
aspect-ratioを使えば簡単に左右の要素の縦横比を固定してレスポンシブ対応できちゃいます。

DOG Pug snugged in a blanket

page

他にも丸が横並びになっていたりとかロゴが並んでいたりとか、色々な場面で使えると思います。

ちなみにaspect-ratioのブラウザ対応状況はこちらです。
https://caniuse.com/mdn-css_properties_aspect-ratio
IE以外の主要ブラウザであれば使うことができます。

まとめ

CSSのプロパティaspect-ratioについてご紹介しました。
CSSはどんどん進化して便利なプロパティが増えています。
IE対応しなくていい案件が増えてきたのでそういった便利なCSSを活用して効率よくコーディングしていきたいですね。