CSS aspect-ratio: How to Make Videos Responsive

When designing web pages, responsive support is essential. Especially when handling media content such as images and videos, it is necessary to ensure that they display properly on various devices.
In this article, we will introduce how to make videos inserted with the video tag responsive using the CSS aspect-ratio property.

Introduction

When handling images in HTML, if you specify the width (width) of the img tag, the height (height) is automatically adjusted. However, in the case of the video tag, even if you specify the width, the height is not automatically adjusted, which may cause the aspect ratio to break. To solve this issue, we use the aspect-ratio property.

What is aspect-ratio?

The aspect-ratio property is a CSS property used to specify the aspect ratio of an element. By using this property, you can maintain the specified aspect ratio even when the width of the element changes.

Benefits

• In responsive design, you can automatically adjust the width while maintaining the video’s aspect ratio.
• The video will be displayed properly even on devices with different screen sizes.

Code Explanation

CSS Code

The following CSS code specifies aspect-ratio: 1 / 1 for li tags arranged side-by-side with a width of 50%. This keeps the aspect ratio of the video tag inside the li tag at 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 Code

Two side-by-side li tags are prepared with a video tag (mp4) and an img tag (jpg).
To display the video tag in Safari on iPhone, you need to include playsinline autoplay muted in the video tag.

<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>

Demo Page: Responsive Video (video tag) Using CSS aspect-ratio

You can check the implementation shown above on the following demo page.

Demo page of responsive video (video tag) using CSS aspect-ratio

Browser Support

The aspect-ratio property is a relatively new CSS feature and is not supported in all browsers or versions. Below is the support status for aspect-ratio in major browsers and devices (as of 2023).

Browser Support

• Google Chrome: Supported from version 88 and later.
• Mozilla Firefox: Supported from version 89 and later.
• Apple Safari: Supported from version 14.1 and later.
• Microsoft Edge: Supported from version 88 and later.
• Opera: Supported from version 74 and later.

Device Support

• PC: If the supported browsers listed above are installed, aspect-ratio is available on most PCs.
• Smartphones: Supported on iOS devices with Safari 14.1 or later, and on Android devices with Chrome 88 or later.
• Tablets: Similarly, supported on iOS tablets with Safari 14.1 or later and Android tablets with Chrome 88 or later.

Notes

• Older browsers or versions may not support the aspect-ratio property, so you may need to consider alternative layout methods.
• In actual projects, it is recommended to check the browsers and devices used by your target users and prepare polyfills or fallback styles if necessary.

Summary

By using the CSS aspect-ratio property, it is possible to make videos responsive while maintaining their aspect ratio. This improves display across different devices and enhances the user experience. Be sure to try this method.

　
*If you reuse this content, please do so at your own responsibility.
Do not reuse the Google Analytics tag inside the demo page head tag.