Video background websites: when the footage earns its weight
A background video earns its place when movement shows something a photograph can't: water in a bathhouse, a kitchen at full service, a product in use. It costs download size, battery and attention, so keep it short, silent and small, give it a visible pause button, and show a still image to anyone who has asked their device for less motion.
Ask what the motion adds
Hero video backgrounds became fashionable once browsers could play video without plugins and connections got fast enough to stream it behind a headline. Many of them are still stock footage of laptops, city timelapses or abstract particles, which say nothing about the business and push the real content further away. Before adding one, write down what a visitor will understand from the footage that a single good photograph wouldn't tell them. If the answer is "atmosphere", a still from the same shoot probably does the job at a fraction of the cost.
- Worth it: a sauna with steam rising, a surf school's waves, a bakery's dough being shaped, a venue filling up, a product whose point is movement.
- Not worth it: generic office footage, drone shots of a city that isn't relevant, slow-motion coffee pours on a site that isn't a café.
Rules for footage that sits behind text
- Short, with an invisible join. A loop of roughly 6 to 15 seconds, cut so the last frame flows into the first.
- Slow, steady movement. No fast cuts, flashes or shaky handheld shots. Background video should feel like a window, not an advert.
- Silent. Strip the audio track entirely; browsers only autoplay video that is muted or has no sound.
- Low contrast where the text sits. Darken or blur the footage behind the headline, or put the text on a solid panel. Measure text contrast against the brightest frame, not an average one.
- A poster image set to the first frame, so something meaningful shows before the video loads and on connections where it never does.
Autoplay and background video performance
MDN's autoplay guide sums up the browser rules: video autoplays if it's muted or has no audio track, audible autoplay is blocked until the visitor interacts, and Safari also needs playsinline to play inline rather than full screen. So the markup is usually <video autoplay muted loop playsinline poster="still.jpg">.
| Lever | What to do |
|---|---|
| Resolution | Export at the size it's shown, often 1280 or 1920 wide for desktop and much smaller for phones |
| Bitrate | Background footage tolerates heavy compression; aim for a file of a few megabytes, not tens |
| Format | Offer a modern codec in WebM or MP4 with a widely supported fallback |
| Length | Shorter loops mean smaller files; ten seconds is plenty |
| Loading | Don't preload video that sits below the fold; show the poster until it scrolls into view |
| Phones | Consider the poster image only on small screens or when the visitor has data saving on |
The video usually becomes the largest thing on the page, so it can delay the moment the hero appears complete. Image optimisation for websites covers the same trade-offs for stills.
Autoplay video accessibility
Moving backgrounds can distract people with attention difficulties and make some people with vestibular disorders feel unwell. WCAG's Pause, Stop, Hide criterion, at level A, says that anything which starts moving automatically, lasts more than five seconds and runs alongside other content needs a way to pause, stop or hide it. A looping background video meets all three conditions.
- A visible pause button, reachable by keyboard and labelled, in a consistent corner of the video. It should stay paused across pages if the visitor chose that.
- Respect reduced motion. When
prefers-reduced-motion: reducematches, show the poster instead of playing. MDN's prefers-reduced-motion reference lists where people set this on each operating system. See also prefers-reduced-motion. - Decorative means hidden from screen readers. Mark a purely decorative video with
aria-hidden="true"and make sure nothing essential is only in the footage. - No flashing. Avoid anything that flashes more than three times a second.
Video in Anticode
You can add your own videos to a build alongside photos. Each file is checked by its first bytes and stored under your account. The model can see photos but can't watch video, so a video is placed by its name and type, which makes a descriptive filename such as steam-room-loop.mp4 more useful than IMG_4412.mov. In practice videos are used by app builds, where the model writes the page's code: ask for a muted, looping background with a poster image, a visible pause button and a still frame under reduced motion, then test it.
The design gate's reduced-motion check looks at CSS animation and transitions, so it won't tell you whether a video respects the setting. That part is up to the request and your own testing on a phone.
Questions people ask
Does a background video need a pause button?
Yes, if it starts automatically, runs longer than five seconds and plays alongside other content. That's WCAG's Pause, Stop, Hide requirement, at level A.
Why won't my background video autoplay on iPhone?
It needs to be muted, or have no audio track, and carry the playsinline attribute. Without those, Safari won't start it automatically inline.
How long should a background video loop be?
Around 6 to 15 seconds is typical. Shorter loops keep the file small; cut it so the end flows into the start.