Video background website design: weight, autoplay and access

On a video background website, a muted, looping video plays behind a section, most often the hero, while the headline and buttons sit on top. Done right, it is light, quiet and optional: it autoplays silently, shows a finished still image before it loads, pauses for people who prefer less motion and never makes the words harder to read. Done wrong, it is the heaviest and most distracting thing on the page.

When a video background is worth it

A video background earns its place when the movement is the message: water for a swimming school, steam for a coffee roaster, a slowly drifting material for a brand whose look is its identity. If the motion is just decoration, a lighter option usually looks as good. Compare the choices before you commit.

The HTML for a background video

Four attributes do the essential work. muted lets the browser autoplay it, since browsers generally block autoplay with sound. playsinline keeps an iPhone from opening it full screen. loop repeats it, and poster shows a still image while it loads. Because it is decorative, hide it from screen readers.

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         poster="/media/hero-poster.jpg" aria-hidden="true">
    <source src="/media/hero.webm" type="video/webm">
    <source src="/media/hero.mp4" type="video/mp4">
  </video>

  <div class="hero-content">
    <h1>Colour that moves with you</h1>
    <button class="hero-pause" type="button">Pause background</button>
  </div>
</section>

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: #120a2e; /* shows before the poster arrives */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills any shape without stretching */
}
.hero-content {
  position: relative; /* sits above the video */
}

MDN's guide to the video element lists every attribute. Remember that autoplay is a request, not a guarantee: some phones in power-saving modes won't play it. That is why the poster must look like a finished design by itself.

Keeping the video file light

Video is usually the largest file on any page that has one. Soft, slow footage compresses far better than sharp, busy footage, so the design choice is also a performance choice. Keep the loop short, around 8 to 15 seconds, remove the audio track entirely and don't serve a larger size than the hero ever displays. Set yourself a size budget before you export, and check the real result in your browser's network panel.

# MP4 (H.264): silent, web-ready, starts playing before it fully downloads
ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4

# WebM (VP9): often smaller at similar quality
ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \
  -vf "scale=1920:-2" hero.webm

# Poster: the first frame as a JPEG
ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

Website hero 1920 × 1080

1920 × 1080

Phone crop

1080 × 1920

Reduced motion and a pause button

Some visitors set their device to reduce motion because movement makes them dizzy or unwell. Respect it by showing the poster instead of the video. Separately, WCAG's Pause, Stop, Hide criterion asks that moving content which starts automatically and lasts more than five seconds, alongside other content, can be paused. A small, visible pause button covers it.

const video = document.querySelector('.hero-video')
const button = document.querySelector('.hero-pause')
const reduce = matchMedia('(prefers-reduced-motion: reduce)')

function follow() {
  if (reduce.matches) video.pause()
  else video.play().catch(() => {}) // the browser may still refuse
}
reduce.addEventListener('change', follow)
follow()

button.addEventListener('click', () => {
  if (video.paused) {
    video.play()
    button.textContent = 'Pause background'
  } else {
    video.pause()
    button.textContent = 'Play background'
  }
})

Reduced motion explains the setting and what else to reduce.

Readable text over a video background

Text over video has to read against every frame, not just the poster. The usual fix is a dark overlay across the whole video, which works but flattens it. Better options: choose calm footage with a quiet region where the words go, keep the brightest movement away from the headline and use a large, heavy weight. Our guide to text over images has seven techniques that apply equally to video.

Video background checklist

1. 1

   Decide it needs to be video

   Footage, or motion that must look identical everywhere. Otherwise consider CSS or a shader.

2. 2

   Keep it short, slow and silent

   8 to 15 seconds, no audio track, a loop that joins.

3. 3

   Export two formats and a poster

   WebM and MP4, at no more than the size it displays, plus a still first frame.

4. 4

   Use the four attributes

   autoplay, muted, loop, playsinline, with poster and aria-hidden.

5. 5

   Respect motion preferences

   Show the poster for reduced motion and add a pause button.

6. 6

   Test on a real phone

   Check load time on mobile data, power-saving mode and the tall crop.

For the design of the hero itself, see website hero backgrounds. If your moving background is a Gradiently Mark, you can export it as a looping MP4 video up to 1080p to use exactly this way.