How to Add a Video Background to Your Website

Key takeaways

• Use a 6–15 second, muted, looping MP4 with a poster image.
• Keep it to a few MB: 1080p or less, no audio, fast start.
• Add an overlay for readable text and a pause option for accessibility.
• Respect prefers-reduced-motion and consider only a poster on mobile.

Video background best practices

• 6–15 seconds, seamless loop.
• Muted, autoplay, playsinline.
• Compressed (aim for a few MB), 1080p or less.
• A poster image for slow connections.
• An overlay so text stays readable.

HTML and CSS for a background video

<section class="hero">
  <video class="bg" autoplay muted loop playsinline poster="poster.jpg">
    <source src="loop.mp4" type="video/mp4">
  </video>
  <div class="content">…</div>
</section>

.hero{position:relative;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

In website builders

Squarespace: section Background → Video. Webflow: Background Video element. Wix: strip background → Video. WordPress themes and Elementor: section background → Video.

Background video vs. a video gallery

A background loop sets the mood; it isn’t for content people should watch. Put watchable videos in a player or gallery below the hero.

Accessibility for background video

• Add a pause button for looping motion.
• Respect prefers-reduced-motion — show the poster instead.
• Keep text contrast readable over every frame.

@media (prefers-reduced-motion: reduce){
  .bg{display:none}
  .hero{background:url(poster.jpg) center/cover}
}

Mobile considerations

Mobile browsers autoplay muted, inline video, but data and battery matter. Consider a smaller file or just the poster image on small screens.

Where to get background footage

Shoot your own product or team footage for authenticity, or use licensed stock video. Trim to a seamless loop and remove audio.

Encode the loop with ffmpeg

Export your clip, then create a web-ready, silent MP4 with fast start (so it begins playing before it fully downloads):

# MP4 (H.264), 1080p wide, no audio, fast start
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart loop.mp4

# Optional smaller WebM (VP9)
ffmpeg -i input.mov -an -vf "scale=1920:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 loop.webm

# Poster image from the first frame
ffmpeg -i loop.mp4 -frames:v 1 poster.jpg

Raise the CRF value for smaller files, lower it for higher quality. For a background, softer detail is fine — text will sit on top.

Keep text readable

.hero{position:relative;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));z-index:-1}
.hero .bg{z-index:-2}

A dark gradient overlay keeps white headlines readable over bright frames. Check contrast on the lightest part of the loop.

Performance budget

Background video vs. a video section

A background loop creates atmosphere; nobody watches it with attention. If you want people to actually watch — a product demo, testimonials, a channel — give those videos their own section with a player, where they can see the whole thing with sound.

Frequently asked questions

Related