HtmlHow-ToBeginner · 3 min read

How to Make Video Responsive in HTML: Simple Steps

To make a video responsive in HTML, wrap the <video> element in a container with CSS that controls its width and aspect ratio. Use max-width: 100% and height: auto on the video to ensure it scales properly on different screen sizes.

📐

Syntax

Wrap your <video> tag inside a container div. Use CSS to set the container's width and maintain the video's aspect ratio. Apply width: 100% and height: auto to the video element to make it scale responsively.

This setup ensures the video resizes with the screen while keeping its shape.

html

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

<style>
.video-container {
  width: 100%;
  max-width: 600px; /* optional max width */
  aspect-ratio: 16 / 9; /* keeps video shape */
}
.video-container video {
  width: 100%;
  height: auto;
  display: block;
}
</style>

💻

Example

This example shows a responsive video that scales to the width of its container while keeping a 16:9 aspect ratio. Resize the browser window to see the video adjust smoothly.

html

<!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 {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: auto;
  }
  .video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
</head>
<body>
  <section 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>
  </section>
</body>
</html>

Output

A video player centered on the page that resizes smoothly as the browser window changes width, maintaining a 16:9 shape.

⚠️

Common Pitfalls

Not setting width: 100% on the video causes it not to scale with the container.
Forgetting height: auto can distort the video's aspect ratio.
Not using a container with a fixed aspect ratio can make the video stretch or squish on resize.
Using fixed pixel widths instead of relative units prevents responsiveness.

html

<!-- Wrong way: fixed size video -->
<video width="640" height="360" controls src="video.mp4"></video>

<!-- Right way: responsive video -->
<div style="width: 100%; max-width: 640px; aspect-ratio: 16 / 9;">
  <video style="width: 100%; height: auto;" controls src="video.mp4"></video>
</div>

📊

Quick Reference

Use these CSS properties for responsive videos:

width: 100% — makes video fill container width
height: auto — keeps correct height ratio
aspect-ratio — maintains video shape
max-width — limits maximum size

Wrap the video in a container to control layout and aspect ratio.

✅

Key Takeaways

Wrap your

Set the video’s width to 100% and height to auto for smooth scaling.

Use relative widths (%, max-width) instead of fixed pixels for responsiveness.

The CSS aspect-ratio property helps maintain the correct video proportions.

Always test by resizing the browser to ensure the video scales properly.