CSS — Responsive Video

Native video, fluid by default

<video controls width="100%" poster="preview.jpg">
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4"  type="video/mp4">
    Your browser doesn't support video.
</video>

• width:100% scales down; height follows the intrinsic ratio automatically
• poster shows before play
• Multiple <source> = format fallback order (WebP-era logic: WebM first, MP4 safety net)
• The fallback text renders only in ancient browsers

The classic iframe problem

YouTube/Vimeo embeds come with fixed dimensions:

<iframe width="560" height="315" …></iframe>   <!-- overflows phones -->

Fix 1: modern one-liner

.video-frame {
    aspect-ratio: 16 / 9;
    width: 100%;
}

<iframe class="video-frame" src="…" title="…"></iframe>

aspect-ratio (the property) makes any element hold its shape at any width.

Fix 2: the padding-top wrapper (legacy-safe)

.video-wrap {
    position: relative;
    padding-top: 56.25%;       /* 9 ÷ 16 = 56.25% */
}
.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

(The percentage-padding reserves 16:9 space; the iframe fills it absolutely.)

You'll meet this pattern in every older codebase — recognize it on sight. Other ratios: 75% (4:3), 56.25% (16:9), 150% (2:3 portrait).

Autoplaying hero/background video

<video autoplay muted loop playsinline poster="fallback.jpg">
    <source src="hero.mp4" type="video/mp4">
</video>

All four attributes are mandatory for the pattern to work:

Attribute	Why
autoplay	starts itself (only allowed because…)
muted	…browsers block audible autoplay
loop	seamless background loop
playsinline	iOS plays in-place instead of hijacking fullscreen

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* same as images! */
}
.hero { position: relative; overflow: hidden; }

Add a gradient scrim above it so overlaid text stays readable.

Performance courtesy

Background videos cost serious bandwidth. Courtesies:

1. Keep clips short (<10s), heavily compressed, muted
2. Respect data-saver / reduced-motion:

if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
    document.querySelector("video").removeAttribute("autoplay");
}

// pause when off-screen:
const io = new IntersectionObserver(([e]) =>
    e.target[e.isIntersecting ? "play" : "pause"]()
);
io.observe(video);

3. Always ship a poster image — perceived speed + graceful failure

Mini Practice

1. Fluid native video with poster and two sources.
2. Wrap a YouTube embed with aspect-ratio; then with the padding hack.
3. Muted looping hero video with dark scrim headline.
4. Auto-pause when scrolled out of view.
5. Disable autoplay under prefers-reduced-motion.

Next: inline-block → (deep-dive page)