CssHow-ToBeginner · 4 min read

How to Make Video Responsive in CSS: Simple Steps

To make a video responsive in CSS, set its width to 100% and height to auto. Wrap the video in a container with a relative position and use padding to keep the aspect ratio consistent.

📐

Syntax

Use a container with position: relative; and padding to maintain aspect ratio. Inside it, set the video element to position: absolute;, width: 100%;, and height: 100%; to fill the container.

This keeps the video scaling properly on different screen sizes.

css and html

<div class="video-container">
  <video src="video.mp4" controls></video>
</div>

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Output

A video that scales to fit the width of its container while keeping the 16:9 aspect ratio.

💻

Example

This example shows a responsive video that adjusts its size to the screen width while keeping the correct aspect ratio.

html and css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Video Example</title>
<style>
  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
</head>
<body>
  <div class="video-wrapper">
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</body>
</html>

Output

A video player that resizes fluidly with the browser window, maintaining a 16:9 aspect ratio.

⚠️

Common Pitfalls

Setting only width: 100% on the video without controlling height can distort the video.
Not using a container with padding to preserve aspect ratio causes the video to lose its shape on resize.
Using fixed pixel sizes makes the video non-responsive on small screens.

Always use the container padding trick to keep the aspect ratio consistent.

html and css

<!-- Wrong way: fixed height causes distortion -->
<video style="width: 100%; height: 300px;" controls></video>

<!-- Right way: container with padding and absolute positioning -->
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;" controls></video>
</div>

Output

Wrong: Video stretched or squished. Right: Video keeps correct shape and scales with container.

📊

Quick Reference

Tips for responsive videos:

Use a container with padding-bottom set to the aspect ratio percentage (e.g., 56.25% for 16:9).
Set container position: relative; and height: 0;.
Set video position: absolute;, width: 100%;, and height: 100%;.
Use max-width: 100% on container to prevent overflow.
Use object-fit: cover; on video to maintain aspect ratio without distortion.

✅

Key Takeaways

Wrap your video in a container with relative position and padding to keep aspect ratio.

Set the video to absolute position with width and height at 100% to fill the container.

Avoid fixed heights on videos to prevent distortion on different screen sizes.

Use padding-bottom percentage based on aspect ratio (e.g., 56.25% for 16:9).

Test responsiveness by resizing the browser window to ensure the video scales properly.