aspect-ratio で動画埋め込み枠
このスニペットは CSS の aspect-ratio プロパティだけで、画面幅が変わっても 16 対 9 などの縦横比を保つボックスを作る実装です。 .ar-box に aspect-ratio:16/9 を指定するだけで、昔よく使われた「 padding-top でパーセント指定して中身を絶対配置する」という回…
解説
このスニペットは CSS の aspect-ratio プロパティだけで、画面幅が変わっても 16 対 9 などの縦横比を保つボックスを作る実装です。.ar-box に aspect-ratio:16/9 を指定するだけで、昔よく使われた「padding-top でパーセント指定して中身を絶対配置する」という回りくどいテクニックが不要になります。中身は width:100%;height:100% でぴったり収まり、overflow:hidden で角丸からはみ出しません。
活用例
- YouTube などの埋め込み動画を、どの幅でも比率を崩さず表示する
- サムネイル画像の枠を統一し、一覧をきれいに揃える
- 正方形のアイコン枠や、縦長のバナー枠
比率は aspect-ratio の値を変えるだけで、正方形なら 1、縦長なら 4/5 のように指定します。スニペットには修飾クラスでの切り替え例も含まれます。注意点として、中に iframe や img を入れるときは width と height を 100% にして、枠いっぱいに広げてください。現行の主要ブラウザはすべて対応済みで、レスポンシブな埋め込み枠を最短で作れます。
よくある質問
16:9 以外の比率にできますか
できます。aspect-ratio の値を 1 にすれば正方形、4/5 にすれば縦長になります。任意の比率を自由に指定でき、複数の修飾クラスを用意して切り替えることも可能です。
中に動画を埋め込むには
ボックスの中に iframe を入れ、その iframe に幅と高さを 100% で指定してください。枠の比率に合わせて動画が引き伸ばされ、どの画面幅でも崩れずに表示されます。