Video-achtergrond op je website: gewicht, autoplay en toegang

Bij een video-achtergrond op een website speelt een gedempte video in een loop achter een sectie, meestal de hero, terwijl de kop en de knoppen erbovenop staan. Goed gedaan is hij licht, stil en optioneel: hij speelt automatisch zonder geluid, toont een voltooid stilstaand beeld voordat hij laadt, pauzeert voor mensen die minder beweging willen en maakt de woorden nooit moeilijker leesbaar. Verkeerd gedaan is hij het zwaarste en meest afleidende onderdeel van de pagina.

Wanneer een video-achtergrond de moeite waard is

Een video-achtergrond verdient zijn plek wanneer de beweging de boodschap is: water voor een zwemschool, stoom voor een koffiebranderij, een langzaam drijvend materiaal voor een merk waarvan de look de identiteit is. Is de beweging alleen decoratie, dan oogt een lichtere optie meestal net zo goed. Vergelijk de keuzes voordat je je vastlegt.

De HTML voor een achtergrondvideo

Vier attributen doen het essentiële werk. Met muted mag de browser hem automatisch afspelen, want browsers blokkeren autoplay met geluid doorgaans. playsinline voorkomt dat een iPhone hem schermvullend opent. loop herhaalt hem, en poster toont een stilstaand beeld terwijl hij laadt. Omdat hij decoratief is, verberg je hem voor schermlezers.

<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 */
}

De gids van MDN over het video-element noemt elk attribuut. Onthoud dat autoplay een verzoek is, geen garantie: sommige telefoons spelen hem in een energiebesparende modus niet af. Daarom moet de poster er op zichzelf uitzien als een voltooid ontwerp.

Het videobestand licht houden

Video is meestal het grootste bestand op elke pagina die er een heeft. Zachte, trage beelden comprimeren veel beter dan scherpe, drukke beelden, dus de ontwerpkeuze is ook een prestatiekeuze. Houd de loop kort, rond 8 tot 15 seconden, verwijder het audiospoor helemaal en lever geen groter formaat dan de hero ooit toont. Stel jezelf een groottebudget voordat je exporteert, en controleer het echte resultaat in het netwerkpaneel van je browser.

# 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

Uitsnede op telefoon

1080 × 1920

Minder beweging en een pauzeknop

Sommige bezoekers stellen hun apparaat in op minder beweging, omdat beweging hen duizelig of onwel maakt. Respecteer dat door de poster te tonen in plaats van de video. Daarnaast vraagt het WCAG-criterium Pause, Stop, Hide dat bewegende inhoud die automatisch start en langer dan vijf seconden duurt, naast andere inhoud, kan worden gepauzeerd. Een kleine, zichtbare pauzeknop volstaat.

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'
  }
})

Minder beweging legt de instelling uit en wat je nog meer kunt verminderen.

Leesbare tekst op een video-achtergrond

Tekst op video moet tegen elk frame leesbaar zijn, niet alleen tegen de poster. De gebruikelijke oplossing is een donkere overlay over de hele video, wat werkt maar hem vlak maakt. Betere opties: kies rustige beelden met een stil gebied waar de woorden komen, houd de helderste beweging weg van de kop en gebruik een groot, zwaar gewicht. Onze gids over tekst op afbeeldingen heeft zeven technieken die net zo goed voor video gelden.

Checklist voor een video-achtergrond

1. 1

   Bepaal of het video moet zijn

   Gefilmde beelden, of beweging die er overal identiek uit moet zien. Overweeg anders CSS of een shader.

2. 2

   Houd hem kort, traag en stil

   8 tot 15 seconden, geen audiospoor, een loop die aansluit.

3. 3

   Exporteer twee formaten en een poster

   WebM en MP4, niet groter dan het formaat waarop hij wordt getoond, plus een stilstaand eerste frame.

4. 4

   Gebruik de vier attributen

   autoplay, muted, loop, playsinline, met poster en aria-hidden.

5. 5

   Respecteer voorkeuren voor beweging

   Toon de poster bij minder beweging en voeg een pauzeknop toe.

6. 6

   Test op een echte telefoon

   Controleer de laadtijd op mobiele data, de energiebesparende modus en de hoge uitsnede.

Voor het ontwerp van de hero zelf, zie hero-achtergronden voor websites. Is je bewegende achtergrond een Mark van Gradiently, dan kun je hem exporteren als MP4-video in een loop tot 1080p en precies zo gebruiken.