CSS RWD Videos

The Video Aspect Ratio Problem

Unlike an image, a <video> or embedded <iframe> (e.g. a YouTube embed) does not automatically preserve its aspect ratio when its width is constrained by CSS -- naive resizing either distorts the video or leaves ugly black bars unless the aspect ratio is explicitly maintained.

Example: The Video Aspect Ratio Problem

<style>
iframe {
  width: 100%;
}
</style>
<iframe src="about:blank" height="200"></iframe>

The Padding-Top Percentage Trick

Before native CSS support existed, the standard technique wrapped the video in a container with padding-top: 56.25% (the percentage for a 16:9 ratio) and positioned the video absolute to fill that padded box, exploiting the fact that percentage padding is calculated from the container's WIDTH even for the top/bottom sides.

Example: The Padding-Top Percentage Trick

<style>
.wrapper {
  position: relative;
  padding-top: 56.25%;
  background: #ddd;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<div class="wrapper">
  <iframe src="about:blank"></iframe>
</div>

The Modern aspect-ratio Property

The aspect-ratio CSS property (e.g. aspect-ratio: 16 / 9) now does natively what the padding-top hack simulated, letting a video or its wrapper maintain a fixed width-to-height ratio directly without any absolute positioning wrapper trick.

Example: The Modern aspect-ratio Property

<style>
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>
<iframe src="about:blank"></iframe>

max-width on Native Video Elements

A native <video> element (not an iframe embed) responds to the same max-width: 100%; height: auto; rule as images, since the browser already knows and preserves its intrinsic aspect ratio.

The padding-trick/aspect-ratio techniques are mainly needed for iframe embeds that don't expose that intrinsic ratio to CSS.

Example: max-width on Native Video Elements

<style>
video {
  max-width: 100%;
  height: auto;
}
</style>
<video controls></video>

Performance Considerations for Responsive Video

Autoplaying background video is especially costly on mobile data and battery -- responsive video strategy often includes serving a static poster image or lower-resolution source below a certain breakpoint rather than the full video at every screen size.

Example: Performance Considerations for Responsive Video

<style>
video {
  width: 100%;
}
@media (max-width: 600px) {
  video {
    display: none;
  }
}
</style>
<video poster="https://placehold.co/600x300" controls></video>