Video without fighting the browser

Background video is one of those tools that promises a lot and ages badly. When it works, it anchors a site’s tone in five seconds. When it fails, you’re left with a black hole on top of the hero and a red Lighthouse.

The minimum that has to happen

1. Serious compression. AV1 or HEVC for browsers that support it, H.264 high profile as fallback. A decent 1080p hero should sit under 800 KB for ten seconds.
2. A real poster. A representative frame, not the first millisecond of the file. Same aspect, progressive JPG at ~80% quality.
3. The right attributes. muted playsinline autoplay loop preload="metadata". Without muted, Safari won’t autoplay; without playsinline, iOS opens the native player full-screen.

What separates a good piece

• Designed loop. First and last frames have to match so the loop doesn’t pop. If not, fade a second in the editor.
• Pause when off-screen. When the hero leaves the viewport, pause with IntersectionObserver. CPU and battery will thank you.
• Consent first. If video is served by Vimeo or YouTube, don’t load it until media consent is granted. Until then, show the poster and an explicit button.
• Reduced motion. prefers-reduced-motion: reduce should swap the video for the poster, no debate.

When not to use video

If the project’s content has no real movement (still photography, static architecture, type), a strong poster usually says more. Video is not decoration; it’s the content when it actually matters.