Videobakgrund på webbplats: vikt, autouppspelning och tillgänglighet

På en webbplats med videobakgrund spelas en ljudlös, loopad video bakom en sektion, oftast hero-ytan, medan rubriken och knapparna ligger ovanpå. Görs det rätt är den lätt, stillsam och valfri: den startar utan ljud, visar en färdig stillbild innan den laddats, pausar för den som föredrar mindre rörelse och gör aldrig orden svårare att läsa. Görs det fel är den det tyngsta och mest distraherande på sidan.

När en videobakgrund är värd det

En videobakgrund förtjänar sin plats när rörelsen är budskapet: vatten för en simskola, ånga för ett kafferosteri, ett långsamt drivande material för ett varumärke vars utseende är dess identitet. Om rörelsen bara är dekoration ser ett lättare alternativ oftast lika bra ut. Jämför valen innan du bestämmer dig.

HTML för en bakgrundsvideo

Fyra attribut gör det viktigaste jobbet. muted låter webbläsaren starta videon automatiskt, eftersom webbläsare i regel blockerar autouppspelning med ljud. playsinline hindrar en iPhone från att öppna den i helskärm. loop upprepar den, och poster visar en stillbild medan den laddas. Eftersom den är dekorativ ska du dölja den för skärmläsare.

<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 till video-elementet listar alla attribut. Kom ihåg att autouppspelning är en begäran, inte en garanti: vissa telefoner i strömsparläge spelar inte upp den. Därför måste affischbilden se ut som en färdig design i sig själv.

Håll videofilen lätt

Video är oftast den största filen på en sida som har en. Mjuk, långsam film komprimeras mycket bättre än skarp, livlig film, så designvalet är också ett prestandaval. Håll loopen kort, kring 8 till 15 sekunder, ta bort ljudspåret helt och servera inte en större storlek än hero-ytan någonsin visar. Sätt en storleksbudget innan du exporterar och kontrollera det verkliga resultatet i webbläsarens nätverkspanel.

# 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

Webbplatsens hero 1920 × 1080

1920 × 1080

Telefonbeskärning

1080 × 1920

Reducerad rörelse och en pausknapp

Vissa besökare ställer in sin enhet på reducerad rörelse eftersom rörelse gör dem yra eller illamående. Respektera det genom att visa affischbilden i stället för videon. Separat från det kräver WCAG-kriteriet Pause, Stop, Hide att rörligt innehåll som startar automatiskt och pågår i mer än fem sekunder, tillsammans med annat innehåll, går att pausa. En liten, synlig pausknapp löser 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'
  }
})

Reducerad rörelse förklarar inställningen och vad mer du bör dra ner på.

Läsbar text över en videobakgrund

Text över video måste läsas mot varje bildruta, inte bara mot affischbilden. Den vanliga lösningen är ett mörkt lager över hela videon, vilket fungerar men plattar ut den. Bättre alternativ: välj lugn film med en stilla del där orden hamnar, håll den ljusaste rörelsen borta från rubriken och använd en stor, kraftig vikt. Vår guide till text över bilder har sju tekniker som lika gärna gäller video.

Checklista för videobakgrund

1. 1

   Avgör att det måste vara video

   Film, eller rörelse som måste se likadan ut överallt. Annars kan du överväga CSS eller en shader.

2. 2

   Håll den kort, långsam och ljudlös

   8 till 15 sekunder, inget ljudspår, en loop som går ihop.

3. 3

   Exportera två format och en affischbild

   WebM och MP4, i högst den storlek den visas i, plus en stillbild av första bildrutan.

4. 4

   Använd de fyra attributen

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

5. 5

   Respektera rörelseinställningar

   Visa affischbilden vid reducerad rörelse och lägg till en pausknapp.

6. 6

   Testa på en riktig telefon

   Kontrollera laddtiden på mobildata, i strömsparläge och med den höga beskärningen.

För designen av själva hero-ytan, se bakgrunder till webbplatsens hero. Om din rörliga bakgrund är en Gradiently-Mark kan du exportera den som en loopad MP4-video i upp till 1080p och använda den precis så här.