Du landar på en webbplats och det första du ser är inte en statisk bild utan en levande video som fyller hela skärmen. Det ser påkostat ut. Det ser professionellt ut. Och viktigast av allt, det fungerar på alla enheter, från en mobil till en ultrabred skärm, utan en enda svart kant.

Du kanske tror att något sådant kräver JavaScript, vyportsmätningar och komplex matematik. Det trodde jag också när jag först gav mig på den här uppgiften. Jag testade calc(), vyportenheter, skrev till och med ett skript för storleksändring. Det fungerade i Firefox, gick sönder i Chrome och var helt stumt i Safari.

Sedan visade det sig att CSS har haft en egenskap i flera år nu som gör exakt det vi behöver, utan en enda rad JS. Och idag ska jag visa dig hur du bygger en fullt responsiv videobakgrund som beter sig som background-size: cover, fast för rörlig video.

💡 Snabb översikt:

• Sätt videoelementet till fast positionering som täcker hela vyporten
• Använd object-fit cover, så anpassar sig videon automatiskt genom att beskära överskottet och bevara mitten
• För äldre webbläsare, behåll en fallback med media queries och en "överdimensionerad container"
• Omslut allt i en container, användbart för överlägg, knappar och text ovanpå videon
• Anpassa för mobil: annan källa, playsinline och en fallback-bild

Grundläggande metod: fast positionering

Varje videobakgrund börjar med att <video> upptar hela visningsytan. Detta görs med position: fixed och nollställda offsetvärden:

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

Elementet sträcker sig exakt till vyportens bredd och höjd. Problemet uppstår omedelbart: video spelas nästan alltid in i bildförhållandet 16:9, men användarens skärm kan vara kvadratisk, ultrabred eller stående. Resultatet blir de svarta kanter som förstör hela effekten.

Om du har arbetat med bakgrundsbilder i CSS vet du att background-size har värdet cover. Det tvingar bilden att fylla containern helt, beskär överskottet och bevarar proportionerna. Vi behöver exakt samma beteende från video. Och det finns.

Modern lösning: object-fit: cover

Egenskapen object-fit skapades just för detta. Den bestämmer hur ett ersatt element (bild eller video) passar in i sin container, och värdet cover fungerar precis 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
}

Videon skalas för att helt fylla containern. Om proportionerna inte stämmer beskär webbläsaren överskottet upptill och nedtill (eller till vänster och höger) och centrerar automatiskt resultatet. Inga svarta kanter.

År 2026 stöds object-fit av 96,39% av webbläsarna globalt (data från Can I Use). Chrome från version 32, Firefox från 36, Safari från 10, Edge från 79. Internet Explorer 11 stöder det inte, men dess marknadsandel närmar sig noll och supportperioden har upphört.

För de allra flesta projekt räcker dessa tre rader CSS. Videobakgrunden är klar.

Skalningsproblem: vad som händer "under huven"

Även om du använder object-fit är det bra att förstå mekaniken. Två scenarier är möjliga:

Första situationen: vyporten är bredare än videon (skärmens bildförhållande större än 16:9). Videon sträcks i bredd för att fylla hela det tillgängliga området, men dess höjd blir större än skärmhöjden, så innehåll beskärs upptill och nedtill. Beskärningsområdet centreras automatiskt.

Andra situationen: vyporten är smalare (bildförhållande mindre än 16:9, till exempel stående orientering på en surfplatta). Videon sträcks i höjd för att fylla hela det tillgängliga området, bredden överskrider vyporten, beskärning sker till vänster och höger, och mitten bevaras.

object-fit: cover hanterar båda scenarierna på egen hand. Men om du av någon anledning arbetar utan den är nästa avsnitt för dig.

Klassiskt trick med en "överdimensionerad container"

Innan object-fit blev standard använde utvecklare en smart teknik. Idén: gör containern medvetet större än både videon och vyporten, så centrerar webbläsaren innehållet automatiskt.

I praktiken ser det ut så här:

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 avgör vilken axel som har överskott och sätter en storlek som är en multipel av vyporten, med en negativ offset för centrering. Videon blir många gånger större än visningsytan, och webbläsaren beskär och centrerar den med standardmekanismen för ersatta element.

Idag är den här koden mer av ett skyddsnät för äldre projekt. Men om du underhåller en webbplats där object-fit av någon anledning inte är tillgängligt fungerar tricket pålitligt.

Produktionskod: att sätta ihop allt

I ett verkligt projekt existerar en videobakgrund sällan för sig själv. Ovanpå den finns en rubrik, en knapp, ett formulär, ett överlägg för textläsbarhet. Därför omsluts videon i en container som bibehåller vyportens dimensioner:

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
}

Direktivet @supports kontrollerar stöd för object-fit och skriver över fallback-reglerna. En modern webbläsare får den rena tre-raderslösningen. En föråldrad webbläsare fungerar via media queries och den överdimensionerade containern.

Markupen är 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>

Några detaljer som är lätta att missa. muted är obligatoriskt: webbläsare blockerar autoplay med ljud. playsinline hindrar iOS från att expandera videon till helskärm. Behöver jag påminna om loop, en videobakgrund utan loop ser ut som ett fel. Dessutom: tillhandahåll en kvadratisk källa för stående orientering via media="(orientation: portrait)". Ett standardklipp i 16:9 på en vertikal skärm kommer att beskäras nästan helt och förvandlas till meningslöst flimmer.

⁉️🤔 Vanliga frågor

Är det nödvändigt att använda just <video>, eller kan jag sätta en YouTube-video som bakgrund?

Du kan använda en YouTube-iframe som bakgrund, men med begränsningar. Du förlorar kontroll över buffring, kan inte ta bort gränssnittselement och mobila webbläsare blockerar ofta iframe-autoplay. För bakgrunder är en självhostad <video> alltid att föredra. Om du bäddar in YouTube, lägg till parametrarna ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Vilket videoformat ska jag välja för maximal kompatibilitet?

Kombinationen MP4 (H.264) + WebM (VP8/VP9) täcker alla moderna webbläsare. MP4 är det primära formatet, WebM är för Chrome och Firefox (mindre storlek vid samma kvalitet). Upplösning för bakgrunder: Full HD räcker. Högre upplösningar ger kvalitetsvinster som är omärkbara i en bakgrund, medan filstorleken växer kvadratiskt. Håll videor inom några megabyte för snabb laddning.

Vad ska jag visa användare medan videon laddas?

Sätt poster på <video>, antingen en statisk första bildruta eller en särskilt förberedd bild. CSS-fallback: background-image på containern, som object-fit inte kommer att täcka (den ligger på ett lager under). För mobilanvändare på långsamma anslutningar är det bättre att inte ladda videobakgrunden alls. Använd media queryn prefers-reduced-data och ersätt med en statisk bild.

Hur gör jag text över videon läsbar?

Lägg till ett halvtransparent överlägg mellan videon och innehållet: background: rgba(0, 0, 0, 0.4) på ett ::after-pseudoelement för containern med position: absolute; inset: 0; z-index: 1. Själva innehållet får z-index: 2; position: relative. Välj mörkningskoefficient baserat på den specifika videon: ljusare material behöver mer, mörkare material behöver mindre.

Fungerar detta på iOS och Android?

Ja, med begränsningar. iOS kräver playsinline (annars går videon in i en helskärmsspelare). På iOS Safari-versioner före 10 stöds inte object-fit, så fallbacken från produktionskoden ovan kommer att aktiveras. Android Chrome fungerar korrekt. På båda plattformarna startar video först efter användarens första interaktion om muted inte är satt, så muted är absolut nödvändigt.

Vad du ska använda i ditt projekt: den korta domen

Om du bygger en webbplats 2026, använd object-fit: cover. Tre rader CSS, ingen JavaScript, full responsivitet direkt ur lådan. Webbläsarstödet är nästan universellt och täckningen ökar för varje månad.

Om du har ett äldre projekt med obligatoriskt stöd för gamla Edge (före 79) eller Firefox (före 36), ger produktionskoden från avsnittet ovan dig båda världar: @supports aktiverar den moderna lösningen, medan media queries fångar upp resten.

Och kom ihåg: en videobakgrund är grädden på moset. Om klippet väger 20 megabyte och tar åtta sekunder att ladda kommer användaren att lämna innan de ser din vackra rubrik. Komprimera, testa i mobilhastighet och tillhandahåll alltid en statisk fallback.

Skål för en bra bakgrund.