aspect-ratioで対応させる方法
aspect-ratioはアスペクト比を指定するcssです。
アスペクト比とは縦横の比率のことです。
現在の一般的な考え方でいうと最近のテレビは16:9、スマートフォンは2:1、タブレットは4:3が基本的なアスペクト比となっております。
※iPhone13は9:19.5となっており、Androidはそれよりも縦長の端末があるので一概に2:1とはいえませんが…
アスペクト比を指定することでレスポンシブ対応させる方法は以下の通りです。
YouTubeで取得した下記の埋め込みコードをレスポンシブ対応させます。
<div class="youtube__aspect-ratio">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ame0P8WQJoA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>.youtube__aspect-ratio {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube__aspect-ratio iframe {
width: 100%;
height: 100%;
}YouTube埋め込み動画のデフォルトの比率が横560px、縦315pxとなっているため比率でいうと16:9となります。
よってiframeを囲むdiv要素にaspect-ratio: 16 / 9 ;を指定するとアスペクト比を保て、widthに100%を指定するとブラウザサイズに追従させることができます。