Du lander på et nettsted og det første du ser er ikke et statisk bilde, men en levende video som fyller hele skjermen. Det ser kostbart ut. Det ser profesjonelt ut. Og viktigst av alt, det fungerer på alle enheter, fra en telefon til en ultrabred skjerm, uten en eneste svart kant.

Du tror kanskje noe slikt krever JavaScript, viewport-målinger og kompleks matematikk. Det trodde jeg også første gang jeg tok fatt på denne oppgaven. Jeg prøvde calc(), viewport-enheter, og skrev til og med et resize-skript. Det fungerte i Firefox, brøt sammen i Chrome og forble helt stille i Safari.

Så viste det seg at CSS har hatt en egenskap i flere år nå som gjør akkurat det vi trenger, uten en eneste linje JS. Og i dag skal jeg vise deg hvordan du bygger en fullt responsiv videobakgrunn som oppfører seg som background-size: cover, men for levende video.

💡 Hurtigoversikt:

• Sett videoelementet til fast posisjonering som dekker hele viewporten
• Bruk object-fit cover, så justerer videoen seg automatisk ved å beskjære overskuddet og bevare midten
• For eldre nettlesere, behold en fallback med media queries og en «overdimensjonert beholder»
• Pakk alt inn i en beholder, nyttig for overlegg, knapper og tekst oppå videoen
• Tilpass for mobil: annen kilde, playsinline og et fallback-bilde

Grunnleggende tilnærming: fast posisjonering

Enhver videobakgrunn starter med at <video> opptar hele visningsområdet. Dette gjøres med position: fixed og null forskyvning:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
}

Elementet strekker seg nøyaktig til bredden og høyden av viewporten. Problemet oppstår umiddelbart: video er nesten alltid filmet i 16:9-format, men brukerens skjerm kan være kvadratisk, ultrabred eller stående. Resultatet er de svarte kantene som ødelegger hele effekten.

Hvis du har jobbet med bakgrunnsbilder i CSS, vet du at background-size har verdien cover. Den tvinger bildet til å fylle beholderen helt, ved å beskjære overskuddet samtidig som proporsjonene bevares. Vi trenger nøyaktig samme oppførsel fra video. Og den finnes.

Moderne løsning: object-fit: cover

Egenskapen object-fit ble skapt nettopp for dette. Den bestemmer hvordan et erstattet element (bilde eller video) passer inn i beholderen sin, og verdien cover fungerer nøyaktig som background-size: cover:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  object-fit: cover;
10
}

Videoen skaleres for å fylle beholderen helt. Hvis proporsjonene ikke stemmer, beskjærer nettleseren overskuddet fra topp og bunn (eller venstre og høyre) og sentrerer resultatet automatisk. Ingen svarte kanter.

Per 2026 støttes object-fit av 96,39% av nettlesere globalt (data fra Can I Use). Chrome fra versjon 32, Firefox fra 36, Safari fra 10, Edge fra 79. Internet Explorer 11 støtter det ikke, men markedsandelen nærmer seg null, og støtteperioden er avsluttet.

For de aller fleste prosjekter er disse tre CSS-linjene nok. Videobakgrunnen er klar.

Skaleringsproblemer: hva som skjer «under panseret»

Selv om du bruker object-fit, er det nyttig å forstå mekanikken. To scenarioer er mulige:

Første situasjon: viewporten er bredere enn videoen (skjermformat større enn 16:9). Videoen strekkes i bredden for å fylle hele det tilgjengelige området, men høyden blir større enn skjermhøyden, så innhold beskjæres fra topp og bunn. Beskjæringsområdet sentreres automatisk.

Andre situasjon: viewporten er smalere (format mindre enn 16:9, for eksempel stående orientering på et nettbrett). Videoen strekkes i høyden for å fylle hele det tilgjengelige området, bredden overstiger viewporten, beskjæring skjer på venstre og høyre side, og midten bevares.

object-fit: cover håndterer begge scenarioer på egen hånd. Men hvis du av en eller annen grunn jobber uten den, er neste seksjon for deg.

Klassisk triks med en «overdimensjonert beholder»

Før object-fit ble standard, brukte utviklere en smart teknikk. Ideen: gjør beholderen bevisst større enn både videoen og viewporten, så vil nettleseren sentrere innholdet automatisk.

I praksis ser det slik ut:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
}
8
 
9
@media (min-aspect-ratio: 16/9) {
10
  #myvid {
11
    height: 300%;
12
    top: -100%;
13
  }
14
}
15
 
16
@media (max-aspect-ratio: 16/9) {
17
  #myvid {
18
    width: 300%;
19
    left: -100%;
20
  }
21
}

Media queries avgjør hvilken akse som har overløp og setter en størrelse som er et multiplum av viewporten, med en negativ forskyvning for sentrering. Videoen ender opp mange ganger større enn visningsområdet, og nettleseren beskjærer og sentrerer den ved hjelp av standardmekanismen for erstattede elementer.

I dag er denne koden mer et sikkerhetsnett for eldre prosjekter. Men hvis du vedlikeholder et nettsted der object-fit av en eller annen grunn ikke er tilgjengelig, fungerer trikset pålitelig.

Produksjonskode: setter alt sammen

I et ekte prosjekt eksisterer en videobakgrunn sjelden alene. Oppå den er det en overskrift, en knapp, et skjema, et overlegg for lesbarhet av tekst. Derfor pakkes videoen inn i en beholder som opprettholder viewport-dimensjoner:

1
#SDStudio_VIDEO_BACKGROUND {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  overflow: hidden;
8
}
9
 
10
#SDStudio_VIDEO_BACKGROUND > video {
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 100%;
16
}
17
 
18
/* Fallback: if object-fit is not supported */
19
@media (min-aspect-ratio: 16/9) {
20
  #SDStudio_VIDEO_BACKGROUND > video {
21
    height: 300%;
22
    top: -100%;
23
  }
24
}
25
 
26
@media (max-aspect-ratio: 16/9) {
27
  #SDStudio_VIDEO_BACKGROUND > video {
28
    width: 300%;
29
    left: -100%;
30
  }
31
}
32
 
33
/* Override if object-fit is available */
34
@supports (object-fit: cover) {
35
  #SDStudio_VIDEO_BACKGROUND > video {
36
    top: 0;
37
    left: 0;
38
    width: 100%;
39
    height: 100%;
40
    object-fit: cover;
41
  }
42
}

@supports-direktivet sjekker støtte for object-fit og overskriver fallback-reglene. En moderne nettleser får den rene trelinjersløsningen. En utdatert en fungerer via media queries og den overdimensjonerte beholderen.

Markupen er minimal:

1
<div id="SDStudio_VIDEO_BACKGROUND">
2
  <video autoplay muted loop playsinline>
3
    <source type="video/mp4" src="myvid.mp4"
4
            media="(orientation: landscape)">
5
    <source type="video/webm" src="myvid.webm"
6
            media="(orientation: landscape)">
7
    <source type="video/mp4" src="myvid_square.mp4"
8
            media="(orientation: portrait)">
9
    <source type="video/webm" src="myvid_square.webm"
10
            media="(orientation: portrait)">
11
  </video>
12
</div>

Noen detaljer som er lette å overse. muted er obligatorisk: nettlesere blokkerer autoplay med lyd. playsinline hindrer iOS i å utvide videoen til fullskjerm. Unødvendig å minne om loop, en videobakgrunn uten looping ser ut som en feil. Også: sørg for en kvadratisk kilde for stående orientering via media="(orientation: portrait)". Et standard 16:9-klipp på en vertikal skjerm vil bli beskåret nesten fullstendig og bli til meningsløs flimring.

⁉️🤔 Ofte stilte spørsmål

Er det nødvendig å bruke <video> spesifikt, eller kan jeg sette en YouTube-video som bakgrunn?

Du kan bruke en YouTube-iframe som bakgrunn, men med forbehold. Du mister kontroll over bufring, kan ikke fjerne grensesnittelementer, og mobile nettlesere blokkerer ofte iframe-autoplay. For bakgrunner er en selvhostet <video> alltid å foretrekke. Hvis du bygger inn YouTube, legg til parameterne ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Hvilket videoformat bør jeg velge for maksimal kompatibilitet?

Kombinasjonen MP4 (H.264) + WebM (VP8/VP9) dekker alle moderne nettlesere. MP4 er primærformatet, WebM er for Chrome og Firefox (mindre størrelse ved samme kvalitet). Oppløsning for bakgrunner: Full HD er nok. Høyere oppløsninger gir kvalitetsgevinster som er umerkelige i en bakgrunn, mens filstørrelsen vokser kvadratisk. Hold videoer innenfor noen få megabyte for rask lasting.

Hva bør jeg vise brukere mens videoen lastes?

Sett poster på <video>, enten en statisk første frame eller et spesiallaget bilde. CSS-fallback: background-image på beholderen, som object-fit ikke vil dekke (den ligger på et lag under). For mobilbrukere på trege tilkoblinger er det bedre å ikke laste videobakgrunnen i det hele tatt. Bruk media query prefers-reduced-data og erstatt med et statisk bilde.

Hvordan gjør jeg tekst over videoen lesbar?

Legg til et halvgjennomsiktig overlegg mellom video og innhold: background: rgba(0, 0, 0, 0.4) på et ::after-pseudoelement av beholderen med position: absolute; inset: 0; z-index: 1. Selve innholdet får z-index: 2; position: relative. Velg mørkleggingskoeffisient basert på den spesifikke videoen: lysere opptak trenger mer, mørkere opptak trenger mindre.

Fungerer dette på iOS og Android?

Ja, med forbehold. iOS krever playsinline (ellers går videoen inn i en fullskjermspiller). På iOS Safari-versjoner før 10 støttes ikke object-fit, så fallbacken fra produksjonskoden over vil tre i kraft. Android Chrome fungerer korrekt. På begge plattformer starter video først etter brukerens første interaksjon hvis muted ikke er satt, så muted er strengt påkrevd.

Hva du bør bruke i prosjektet ditt: den korte dommen

Hvis du bygger et nettsted i 2026, bruk object-fit: cover. Tre linjer CSS, ingen JavaScript, full responsivitet ut av boksen. Nettleserstøtten er nesten universell, og dekningen vokser bare for hver måned.

Hvis du har et eldre prosjekt med obligatorisk støtte for gammel Edge (før 79) eller Firefox (før 36), gir produksjonskoden fra seksjonen over deg begge verdener: @supports aktiverer den moderne løsningen, mens media queries fanger opp resten.

Og husk: en videobakgrunn er prikken over i-en. Hvis klippet veier 20 megabyte og tar åtte sekunder å laste, vil brukeren forlate siden før de ser din vakre overskrift. Komprimer, test ved mobilhastigheter, og sørg alltid for en statisk fallback.

Skål for en flott bakgrunn.