# Videobakgrunn på nettside: vekt, autoplay og tilgjengelighet

[Canonical HTML page](https://gradiently.design/nb/guide/video-background-website)

En hero i bevegelse kan få et nettsted til å føles levende, eller gjøre det tregt, forstyrrende og vanskelig å lese. Forskjellen er en kort liste med tekniske valg og designvalg.

## The short version

- En videobakgrunn på en nettside er en dempet video i loop som spilles bak en seksjon, som regel heroen, mens tekst og knapper ligger oppå.
- Nettlesere lar som regel en video starte automatisk bare når lyden er av, og iPhone trenger i tillegg attributtet playsinline for å holde den inne på siden.
- Et plakatbilde bør vises før videoen lastes og hver gang den ikke kan spilles, så det må se ut som et ferdig design alene.
- Besøkende som ber om redusert bevegelse, bør få det stillestående plakatbildet, og bevegelig innhold som spilles i mer enn fem sekunder, trenger en måte å settes på pause på.
- Korte, langsomme og lydløse looper komprimeres mye bedre enn urolige opptak, og det holder siden rask.

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.

| Alternativ | Sidevekt | Best til |
| --- | --- | --- |
| Stillbilde | Lett | Fotografi, og sider der fart betyr mest |
| CSS-gradient, animert | Nesten ingenting | Enkle driv og fargeskift |
| WebGL-shader | Lett nedlasting, bruker GPU-en | Levende teksturer, korn og flyt |
| Video | Tung, med mindre den er kort og langsom | Ekte opptak, eller bevegelse som må se helt lik ut overalt |

Video er det eneste alternativet for opptak. For abstrakt bevegelse er [CSS](https://gradiently.design/nb/guide/css-animated-gradient) og [shadere](https://gradiently.design/nb/guide/shader-gradients) ofte lettere.

## 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.

```html
<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>
```

Nettleseren bruker den første kilden den kan spille: WebM der det støttes, MP4 overalt ellers.

```css
.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 */
}
```

`object-fit: cover` beskjærer videoen til enhver skjermform. Hold den viktige delen av opptaket nær midten.

MDNs guide til [video-elementet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) 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.

```bash
# 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
```

Innstillinger å starte med. `-an` fjerner lyden, og et høyere CRF-tall gir en mindre, mykere fil. Øk det til du ser artefakter, og gå så ett steg tilbake.

- Nettsidehero 1920 × 1080: 1920 × 1080
- Utsnitt på mobil: 1080 × 1920

Master i 1920 × 1080. På en mobil viser `object-fit: cover` bare en høy stripe fra midten, så komponer med det i tankene.

> **Få loopen til å gå i hop** Et synlig hopp hvert tiende sekund forstyrrer mer enn ingen video. Se [hvordan du lager en sømløs loop](https://gradiently.design/nb/guide/seamless-loop-video).

## 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](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) 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.

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

Sett på pause ved redusert bevegelse, følg innstillingen hvis den endres, og gi alle en pauseknapp.

[Redusert bevegelse](https://gradiently.design/nb/guide/reduced-motion) 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](https://gradiently.design/nb/guide/text-over-image) har sju teknikker som gjelder like mye for video.

En bred nettsidehero med en overskrift over en urolig tekstur i bevegelse som konkurrerer med ordene

Urolig materiale som går rett gjennom overskriften…

Den samme nettsideheroen der teksturen roer seg bak overskriften, så den leses tydelig

…og den samme heroen med den rolige delen av flaten bak ordene.

## Sjekkliste for videobakgrunn

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. **Hold den kort, langsom og lydløs** 8 til 15 sekunder, uten lydspor, en loop som går i hop.
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. **Bruk de fire attributtene** `autoplay`, `muted`, `loop`, `playsinline`, med `poster` og `aria-hidden`.
5. **Respekter bevegelsesinnstillinger** Vis plakatbildet ved redusert bevegelse og legg til en pauseknapp.
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](https://gradiently.design/nb/guide/website-hero-background). 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.

## FAQ

### Hvorfor starter ikke bakgrunnsvideoen min automatisk?

Nettlesere blokkerer som regel autoplay med lyd, så legg til attributtet muted. På iPhone legger du også til playsinline, og husk at strømsparingsmodus fortsatt kan stoppe autoplay, så et godt plakatbilde er viktig.

### Er en videobakgrunn dårlig for farten på nettsiden?

Det kan den være, fordi video som regel er den største filen på siden. Korte, langsomme og lydløse looper i riktig størrelse, i WebM og MP4, holder kostnaden nede.

### Hvilken størrelse bør en bakgrunnsvideo til en nettside ha?

Lag masteren i 1920 × 1080, og server den ikke større enn den vises. Mykt, abstrakt opptak ser ofte fint ut i lavere oppløsning.

### Må bakgrunnsvideoer være tilgjengelige?

Ja. Skjul dekorativ video for skjermlesere, vis et stillbilde til besøkende som ber om redusert bevegelse, og gi en pausekontroll for bevegelse som varer i mer enn fem sekunder.

### Hva er et lettere alternativ til en videobakgrunn?

En animert CSS-gradient eller en WebGL-shader kan skape abstrakt bevegelse med en mye mindre nedlasting, selv om shadere bruker grafikkbrikken mens de kjører.