[aspect-ratio]Youtube動画などのiframeタグの中身を縦横比を維持したままレスポンシブにする

概要

Youtube動画を埋め込んだ時にwidthとheightが固定になっていて、スマホで表示した時に横幅が画面からはみ出していました。

メモとして、変更点のみ記載します。

修正前

<iframe width="560" height="315"></iframe>

修正後

<div style="aspect-ratio: 560/315;">
  <iframe width="560" height="315"></iframe>
<div>

下記でもOKみたい。

<iframe width="100%" height="100%" style="aspect-ratio: 560/315;"></iframe>

aspect-ratioは便利ですね😀

※Mac Safari(14.1.2)でaspect-ratioが効いてないから調べてみたら、対応してるバージョンは15(2021.9リリース)からなのか...
まだしばらくpadding-top: ~%使った方がいいのかな。
Can I use