Website background video: size, format and performance

A background video is decoration. Visitors came for the words on top of it, so every choice below comes from one rule: the video must never make the page slower to show, harder to read or harder to use. For the step-by-step build with an agent, see Add a video background hero with Claude Code. This page is the reference behind it.

Length and content

• 5 to 15 seconds is enough for a loop. Longer clips cost more bytes and nobody watches a background to the end.
• Slow, steady motion loops better and compresses smaller than fast cuts. Busy footage behind text is also harder to read.
• A calm area where the headline sits, or a darker grade, saves you from a heavy overlay later.
• A clean loop: cut where the last frame flows into the first, or fade both ends to the same color.

Resolution and file size

Encode at 1920 pixels wide at most for desktop and about 1280 for phones. A background is usually covered by text and an overlay, so it can be softer than a video people watch. Drop the frame rate to 24 or 30 if the source is higher.

There is no single right size. Compare the video with the rest of the page: if it weighs more than everything else on the first screen together, shorten it, lower the resolution or raise the compression.

Formats: H.264 and AV1

Encode the H.264 file with FFmpeg. -an drops the sound, -pix_fmt yuv420p keeps it playable in Safari, and +faststart lets playback begin before the file has fully arrived:

ffmpeg -i source.mov -t 10 -vf "scale=1920:-2,fps=30" \
  -c:v libx264 -crf 26 -preset slow -pix_fmt yuv420p \
  -an -movflags +faststart public/hero.mp4

Then an AV1 version, if your FFmpeg has the SVT-AV1 encoder (ffmpeg -encoders | grep svtav1). Its -crf runs from 0 to 63; higher is smaller and softer:

ffmpeg -i public/hero.mp4 -c:v libsvtav1 -crf 38 -preset 6 \
  -pix_fmt yuv420p -an -movflags +faststart public/hero-av1.mp4

List the AV1 file first, with its codecs string, so browsers that can’t play it move on to the H.264 file:

<video autoplay muted loop playsinline preload="metadata"
       poster="/hero-poster.webp" aria-hidden="true">
  <source src="/hero-av1.mp4" type='video/mp4; codecs="av01.0.08M.08"'>
  <source src="/hero.mp4" type="video/mp4">
</video>

The poster and Largest Contentful Paint

Google’s Largest Contentful Paint (LCP) counts a video by whichever comes first: its poster image loading or its first frame showing. A good LCP is 2.5 seconds or less. So the poster matters more than the video for how fast the page feels:

• Save the first frame as a compressed WebP or JPEG poster: ffmpeg -i public/hero.mp4 -frames:v 1 -q:v 3 public/hero-poster.jpg.
• Make the poster the same frame the video starts on, so nothing jumps when playback begins.
• Keep the headline as real HTML text over the video, not baked into it. Text can be the LCP element itself, and it doesn’t wait for the video.

The preload attribute is only a hint, and autoplay takes precedence over it, so a video that autoplays starts downloading anyway. For a video far down the page, leave out autoplay and start it with JavaScript when it scrolls into view.

Autoplay rules

• Muted: browsers reliably autoplay only video without sound. Without muted, most first visits get no autoplay.
• playsinline: iPhones need it to play the video inside the page instead of full screen.
• loop repeats it; without it the video stops on its last frame.
• Plan for no autoplay at all. Power-saving modes and some settings block it, and then the poster is all visitors see. It has to work on its own.

Text over video

Text needs a contrast of at least 4.5:1 against what is behind it (3:1 for large text) on every frame, not just the first. A dark gradient behind the text is the usual fix. Check the brightest moment of the clip, not the one in your screenshot.

Motion and control

• Respect prefers-reduced-motion: show the poster and don’t play.
• Add a visible pause button that works with the keyboard. WCAG’s Pause, Stop, Hide rule requires a way to pause motion that starts on its own and lasts more than five seconds.
• Mark the video aria-hidden="true" when it is decoration, so screen readers skip it.

Examples you can build with an agent

These Lookbk skills build a hero with moving footage and handle the poster, the fallback still, the phone layout and the checks for you. Each card plays the skill’s real rendered preview.

web

Scroll Film HeroClaude CodeCodexCursor+3 more agents

web

Den Computer HeroClaude CodeCodexCursor+3 more agents

web

Surf Van HeroClaude CodeCodexCursor+3 more agents

web

Disco Rink HeroClaude CodeCodexCursor+3 more agents

Scroll Film Hero takes your own clip and plays it as the visitor scrolls. The Footage Heroes ship their own film and show a still if the film fails, autoplay is blocked or it takes more than 8 seconds to start. See the best video background hero sections for all of them.