CSSのaspect-ratioで動画をレスポンシブ対応させる方法｜DAD UNION

Webページをデザインする際、レスポンシブ対応は欠かせません。特に、画像や動画などのメディアコンテンツを扱う場合、様々なデバイスで適切に表示されるようにする必要があります。
今回は、CSSのaspect-ratioプロパティを使用して、videoタグで挿入された動画をレスポンシブ対応させる方法をご紹介します。

Contents

はじめに
aspect-ratioとは
メリット
実際のコード説明
- CSSコード
- HTMLコード
CSSのaspect-ratioで動画（videoタグ）をレスポンシブ対応したデモページ
ブラウザの対応状況
まとめ

はじめに

HTMLで画像を扱う場合、imgタグの幅（width）を指定すると、高さ（height）が自動的に調整されます。しかし、videoタグの場合、幅を指定しても高さが自動的に調整されないため、縦横比が崩れることがあります。これを解決するためにaspect-ratioプロパティを使用します。

aspect-ratioとは

aspect-ratioプロパティは、要素の縦横比を指定するためのCSSプロパティです。このプロパティを使用することで、要素の幅が変更されても指定した縦横比を維持することができます。

メリット

レスポンシブデザインにおいて、動画の縦横比を維持しつつ幅を自動調整できる。
サイズが異なるデバイスでも、動画が適切に表示される。

実際のコード説明

CSSコード

以下のCSSコードは、幅が50%の横並びのliタグにaspect-ratio: 1 / 1を指定しています。これにより、liタグ内のvideoタグの縦横比が1:1に保たれます。

<style>
ul{
  margin: 0 auto;
  padding: 0;
  width: 80%;
  overflow: hidden;
  list-style: none;
}
ul li{
  width: 50%;
  float: left;
  aspect-ratio: 1 / 1;
  margin: 0;
  list-style: none;
  border: solid 1px #cccccc;
  box-sizing: border-box;
}
ul li img{
  width: 100%;
  height: auto;
}
ul li video{
  width: 100%;
  height: 100%;
}
</style>

HTMLコード

横並びの2つのliタグ内にvideoタグ（mp4）とimgタグ（jpg）を用意しました。
iPhoneのSafariでもvideoタグを表示させるために、videoタグにplaysinline autoplay mutedを記述する必要があります。

<ul>
  <li>
    <video playsinline autoplay muted loop>
      <source src="https://dad-union.com/demo/js/20230209-covervid/tree.mp4" type="video/mp4">
    </video>
  </li>
  <li><img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt=""></li>
</ul>