Videobakgrunn på nettside: vekt, autoplay og tilgjengelighet

Med en videobakgrunn på nettside spilles en dempet video i loop bak en seksjon, oftest heroen, mens overskriften og knappene ligger oppå. Gjort riktig er den lett, stille og valgfri: den starter lydløst av seg selv, viser et ferdig stillbilde før den lastes, stopper for dem som foretrekker mindre bevegelse, og gjør aldri ordene vanskeligere å lese. Gjort feil er den det tyngste og mest forstyrrende på siden.

Når en videobakgrunn er verdt det

En videobakgrunn fortjener plassen når bevegelsen er budskapet: vann for en svømmeskole, damp for et kaffebrenneri, et materiale som driver sakte for en merkevare der uttrykket er identiteten. Er bevegelsen bare pynt, ser et lettere alternativ som regel like bra ut. Sammenlign valgene før du bestemmer deg.

HTML for en bakgrunnsvideo

Fire attributter gjør det viktigste arbeidet. muted lar nettleseren starte den automatisk, siden nettlesere som regel blokkerer autoplay med lyd. playsinline hindrer en iPhone i å åpne den i fullskjerm. loop gjentar den, og poster viser et stillbilde mens den lastes. Fordi den er dekorativ, skjuler du den for skjermlesere.

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

MDNs guide til video-elementet lister opp hvert attributt. Husk at autoplay er en forespørsel, ikke en garanti: noen mobiler i strømsparingsmodus spiller den ikke. Derfor må plakatbildet se ut som et ferdig design i seg selv.

Hold videofilen lett

Video er som regel den største filen på enhver side som har en. Mykt, langsomt opptak komprimeres mye bedre enn skarpt og urolig opptak, så designvalget er også et ytelsesvalg. Hold loopen kort, rundt 8 til 15 sekunder, fjern lydsporet helt, og server ikke en større størrelse enn heroen noen gang viser. Sett deg et størrelsesbudsjett før du eksporterer, og sjekk det faktiske resultatet i nettverkspanelet i nettleseren.

# 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

Nettsidehero 1920 × 1080

1920 × 1080

Utsnitt på mobil

1080 × 1920

Redusert bevegelse og en pauseknapp

Noen besøkende stiller enheten sin til å redusere bevegelse fordi bevegelse gjør dem svimle eller uvel. Respekter det ved å vise plakatbildet i stedet for videoen. I tillegg ber WCAG-kriteriet Pause, Stop, Hide om at bevegelig innhold som starter automatisk og varer i mer enn fem sekunder, ved siden av annet innhold, kan settes på pause. En liten, synlig pauseknapp dekker det.

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

Redusert bevegelse forklarer innstillingen og hva mer du bør redusere.

Lesbar tekst over en videobakgrunn

Tekst over video må kunne leses mot hvert eneste bilde, ikke bare plakatbildet. Den vanlige løsningen er et mørkt overlegg over hele videoen, som virker, men gjør den flat. Bedre alternativer: velg rolig opptak med et stille område der ordene skal stå, hold den lyseste bevegelsen unna overskriften, og bruk en stor, kraftig vekt. Guiden vår om tekst på bilde har sju teknikker som gjelder like mye for video.

Sjekkliste for videobakgrunn

1. 1

   Bestem at det må være video

   Opptak, eller bevegelse som må se identisk ut overalt. Ellers bør du vurdere CSS eller en shader.

2. 2

   Hold den kort, langsom og lydløs

   8 til 15 sekunder, uten lydspor, en loop som går i hop.

3. 3

   Eksporter to formater og et plakatbilde

   WebM og MP4, ikke større enn størrelsen den vises i, pluss et stillbilde av første bilde.

4. 4

   Bruk de fire attributtene

   autoplay, muted, loop, playsinline, med poster og aria-hidden.

5. 5

   Respekter bevegelsesinnstillinger

   Vis plakatbildet ved redusert bevegelse og legg til en pauseknapp.

6. 6

   Test på en ekte mobil

   Sjekk lastetiden på mobildata, strømsparingsmodus og det høye utsnittet.

For designet av selve heroen, se hero-bakgrunner til nettsider. Er den bevegelige bakgrunnen din en Mark fra Gradiently, kan du eksportere den som en MP4-video i loop i opptil 1080p og bruke den akkurat slik.