🐣

YouTubeなどの動画をレスポンシブ対応する

2023/08/18に公開

CSS

少し前までは高さが自動でついてきてくれなかったので、

.youtube169 {
  padding-top: 56.25%;
}
.youtube43 {
  padding-top: 75%;
}

的なことをやっていましたが、これがpositionを使用したりしなければならず、なんとなく心のどこかに「動画の埋め込みのレスポンシブは面倒くさい」という印象が拭えていないのでリプレイスする。

aspect-ratioプロパティを指定するだけ

いつもの

こんな感じ。

.youtube169 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  
  /* iframe自体の最大幅を制限して中央寄せする場合など */
  max-width: 640px;
  margin-inline: auto;
}

iframeをそのままインラインで使用することはほぼないので、なんらかの親要素にaspect-ratioをかけてiframe自体のwidthとheightを100%にするのもありだけど、個人的にはちょっと助長に感じる。

気にした点は以下

HTMLでheight属性が指定されている場合はheight:auto;を指定しないとダメ
16 / 9 の間の半角スペースがないと動かない気がしたけど気のせいだった
display: block; はおまけ。高さを指定するのにインラインのままはキモいので
あたりまえだけど、4：3 の場合は 4 / 3
フローの方向で順番が変わるのかもと思ったけど、width / height らしいのでそのままっぽい
横 / 縦の順番なら「横縦比（ヨコタテ比）」と言った方が良さそうなのに、「縦横比（タテヨコ比とかジュウオウ比）」というのはなぜだろう
縦と横と言えばgridのcolumnとrowもなぜかしっくりこない

aspect-ratioプロパティを指定するだけ

Discussion