CSS Responsive

RWD Videos

Videos and embedded players such as YouTube iframes have a fixed intrinsic size that overflows small screens. Making them responsive means keeping their aspect ratio while letting their width flex. Modern CSS does this in one line with the aspect-ratio property; the older padding hack still helps for legacy support.

The Simple Case: HTML5 video

A native video element responds just like an image: give it max-width: 100% and height: auto and it scales fluidly within its container while preserving its proportions.

Fluid HTML5 video

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

The Modern Way: aspect-ratio

The aspect-ratio property locks an element's width-to-height ratio. Set aspect-ratio: 16 / 9 and width: 100%, and the element fills its container width while its height follows automatically — perfect for video and embeds.

A responsive 16:9 box with aspect-ratio — resize it

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; padding: 16px; }
  .player {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16 / 9;   /* always 16:9, whatever the width */
    background: #0f172a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
  }
</style>
</head>
<body>
  <div class="player">16 : 9 (resize me)</div>
</body>
</html>

💡

aspect-ratio: 16 / 9 covers most video. Use 4 / 3 for older footage, 1 / 1 for square social embeds, and 21 / 9 for ultrawide.

Responsive iframes (YouTube, Vimeo)

Embedded iframes have fixed width and height attributes and will overflow. Wrap the iframe or give it aspect-ratio so it scales. With modern CSS you can apply aspect-ratio directly to the iframe.

A responsive embedded iframe

.embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

The Legacy Padding-Top Hack

Before aspect-ratio was supported, the standard trick was a wrapper with padding-top set to the ratio percentage (9 / 16 = 56.25%), holding open the space, with the video absolutely positioned to fill it. It is still useful for very old browsers.

The classic padding-top ratio technique

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; margin: 0; padding: 16px; }
  .ratio {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding-top: 56.25%; /* 9 / 16 = 16:9 */
    background: #f1f5f9;
  }
  .ratio .fill {
    position: absolute;
    inset: 0; /* top/right/bottom/left: 0 */
    background: #db2777;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
  }
</style>
</head>
<body>
  <div class="ratio">
    <div class="fill">Padding hack 16:9</div>
  </div>
</body>
</html>

Ratio	aspect-ratio value	padding-top
16:9 widescreen	16 / 9	56.25%
4:3 standard	4 / 3	75%
1:1 square	1 / 1	100%
21:9 ultrawide	21 / 9	42.86%

ℹ️

aspect-ratio is supported in all modern browsers. Reach for the padding hack only if you must support quite old versions.

Key Points

A native <video> is fluid with max-width: 100% and height: auto.
aspect-ratio: 16 / 9 with width: 100% keeps ratios in one line of CSS.
Apply aspect-ratio to iframes to make YouTube/Vimeo embeds responsive.
The padding-top hack (56.25% for 16:9) is the legacy fallback.
Match the ratio to the content: 16:9 video, 4:3 old footage, 1:1 square.