Website Video Backgrounds: Best Practices for Speed, Mobile and Accessibility

A looping video hero can look great and cost 20 MB. These are the settings that keep it under 1 MB and keep Lighthouse happy, using free footage from the stock video library.

1. Pick the right clip

Slow motion, few scene changes, soft focus: those compress well. Confetti, rain and fast pans do not. Keep it 8 to 15 seconds and make the last frame resemble the first for a seamless loop.

2. Compress properly

ffmpeg -i in.mp4 -an -vf "scale=1280:-2,fps=24" -c:v libx264 -crf 28 -preset slow -movflags +faststart out.mp4
ffmpeg -i in.mp4 -an -vf "scale=1280:-2,fps=24" -c:v libvpx-vp9 -crf 36 -b:v 0 out.webm

Remove audio (-an), cap at 1280 px wide for backgrounds, 24 fps is plenty, and faststart lets playback begin before the file finishes downloading. Serve WebM first with MP4 fallback.

3. Markup

<video class="hero-bg" autoplay muted loop playsinline preload="metadata" poster="/img/hero-poster.jpg">
  <source src="/video/hero.webm" type="video/webm">
  <source src="/video/hero.mp4" type="video/mp4">
</video>

muted and playsinline are required for autoplay on mobile. The poster should be a compressed JPEG or WebP of the first frame so the layout is stable before the video loads.

4. Mobile strategy

On small screens, serve the poster only or a much smaller clip via a media query in JavaScript. Data-saver users (navigator.connection.saveData) should never receive the video.

5. Respect reduced motion

@media (prefers-reduced-motion: reduce) { .hero-bg { display: none; } }

Also provide a pause button; WCAG 2.2.2 requires a way to stop moving content that lasts more than five seconds.

6. Text over video

Add a dark overlay (40 to 60 percent) or a gradient behind headlines; contrast changes every frame otherwise. Test the worst frame, not the best.

7. Core Web Vitals

• Do not preload the whole video; preload="metadata" or none.
• The poster is usually the LCP element: optimise it like any hero image.
• Set explicit dimensions or aspect-ratio on the container to avoid CLS.

When a video background is the wrong tool

If the point is to show your product or brand rather than atmosphere, a vector animation (Lottie, SVG, WebGL) is smaller, sharp on every screen and can respond to the user. Compare formats in Lottie vs GIF vs SVG vs MP4 and see web animation examples by the founder of this site.