RWD Videos

Responsive Web Design: Handling Videos

Learn techniques to make embedded videos adapt fluidly to different screen sizes.

Basic Scaling with max-width

A simple and effective way to make videos (and images) responsive is to set their max-width to 100% and height to auto. This allows the video to shrink proportionally if its container becomes narrower than the video’s native width, but prevents it from growing larger than its original size.

video, iframe {
  max-width: 100%;
  height: auto;
}

Why max-width: 100% instead of width: 100%? Using width: 100% forces the video to always fill the container’s width, which can lead to pixelation if the container is wider than the video’s intrinsic width. max-width: 100% ensures the video scales down nicely but respects its original maximum dimensions.

Maintaining Aspect Ratio

While max-width: 100% works well, sometimes embedded videos (especially those from <iframe> elements like YouTube embeds) might not inherently maintain their aspect ratio correctly, potentially leading to black bars (letterboxing) or distorted content.

A common modern technique involves using the aspect-ratio CSS property:

/* Apply directly to the video or iframe if possible */
.responsive-video {
  width: 100%; /* Fill the container */
  max-width: 100%; /* Don't exceed container */
  height: auto; /* Let height adjust */
  aspect-ratio: 16 / 9; /* Common widescreen ratio */
}

For broader compatibility or more complex scenarios (like controlling the aspect ratio of a container holding an absolutely positioned iframe), a classic ‘padding-top’ trick is often used:

/* 1. Create a container */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

/* 2. Position the iframe/video absolutely within it */
.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Explanation: The container’s height is set to 0, but padding-top (as a percentage of the width) creates the necessary vertical space to maintain the aspect ratio. The video/iframe is then stretched to fill this container.

Choose the aspect-ratio property for simplicity when supported, or the padding trick for older browsers or specific container needs.

Adding a Responsive Video Example

Let’s integrate a responsive video into a sample layout using the aspect-ratio property:

HTML:
```html
<div class="video-wrapper">
  <iframe
    class="responsive-video"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/your_video_id"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

CSS:

.video-wrapper {
  max-width: 720px; /* Optional: constrain max size */
  margin: 2em auto; /* Center the wrapper */
}

.responsive-video {
  display: block; /* Remove extra space below iframe */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none; /* Remove default iframe border */
}

This setup ensures the YouTube video scales correctly within its wrapper, maintaining its 16:9 aspect ratio.