CSS

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

Webページをデザインする際、レスポンシブ対応は欠かせません。特に、画像や動画などのメディアコンテンツを扱う場合、様々なデバイスで適切に表示されるようにする必要があります。
今回は、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>

CSSのaspect-ratioで動画(videoタグ)をレスポンシブ対応したデモページ

上記を実装した内容は以下のデモページから確認できます。

CSSのaspect-ratioで動画(videoタグ)をレスポンシブ対応したデモページ

ブラウザの対応状況

aspect-ratioプロパティは比較的新しいCSS機能であり、すべてのブラウザやバージョンでサポートされているわけではありません。以下は、主要なブラウザとデバイスでのaspect-ratioのサポート状況です(2023年時点)。

ブラウザの対応状況

  • Google Chrome: バージョン88以降でサポート。
  • Mozilla Firefox: バージョン89以降でサポート。
  • Apple Safari: バージョン14.1以降でサポート。
  • Microsoft Edge: バージョン88以降でサポート。
  • Opera: バージョン74以降でサポート。

端末の対応状況

  • PC: 上記の対応ブラウザがインストールされていれば、ほとんどのPCでaspect-ratioが利用可能です。
  • スマートフォン: iOSデバイスではSafari 14.1以降、AndroidデバイスではChrome 88以降でサポートされています。
  • タブレット: 同様に、iOSタブレットではSafari 14.1以降、AndroidタブレットではChrome 88以降でサポートされています。

注意点

  • 古いブラウザやバージョンではaspect-ratioプロパティがサポートされていないため、代替のレイアウト手法を検討する必要があるかもしれません。
  • 実際のプロジェクトでは、対象となるユーザーのブラウザとデバイスの使用状況を確認し、必要に応じてポリフィルやフォールバックスタイルを用意することをお勧めします。

最新の情報については確認してください。

まとめ

CSSのaspect-ratioプロパティを使用することで、動画の縦横比を維持しつつレスポンシブ対応させることが可能です。これにより、異なるデバイスでの表示が改善され、ユーザー体験が向上します。ぜひこの方法を試してみてください。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。