Saavut verkkosivulle, ja ensimmäisenä näet elävän, hengittävän videon, joka täyttää koko ruudun. Se näyttää kalliilta. Se näyttää ammattimaiselta. Ja mikä tärkeintä, se toimii millä tahansa laitteella puhelimesta ultralaajaan näyttöön ilman yhtäkään mustaa palkkia.

Saatat ajatella, että tällainen vaatii JavaScriptiä, näkymän mittauksia ja monimutkaista matematiikkaa. Niin minäkin ajattelin, kun tartuin tähän tehtävään ensimmäistä kertaa. Kokeilin calc()-funktiota, näkymäyksiköitä ja kirjoitin jopa skriptin koon muuttamiseen. Se toimi Firefoxissa, hajosi Chromessa ja pysyi täysin mykkänä Safarissa.

Sitten kävi ilmi, että CSS:ssä on ollut jo useamman vuoden ajan ominaisuus, joka tekee juuri sen mitä tarvitsemme, ilman yhtäkään JavaScript-riviä. Ja tänään näytän sinulle, miten rakennat täysin responsiivisen videotaustan, joka käyttäytyy kuten background-size: cover, mutta elävälle videolle.

💡 Nopea yleiskatsaus:

• Aseta videoelementti kiinteään positioon, joka peittää koko näkymän
• Käytä object-fit coveria, video mukautuu automaattisesti rajaamalla ylimenevän osan ja säilyttäen keskipisteen
• Vanhempia selaimia varten pidä varasuunnitelma käyttäen media queryitä ja "ylisuurta säiliötä"
• Kääri kaikki säiliöön, mikä on hyödyllistä päällekkäisille elementeille, painikkeille ja tekstille videon päällä
• Mukauta mobiililaitteille: eri lähde, playsinline ja varakuva

Perusratkaisu: kiinteä positiointi

Mikä tahansa videotausta alkaa siitä, että <video>-elementti saa koko katselualueen käyttöönsä. Tämä tehdään position: fixed -määrityksellä nollasiirtymillä:

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

Elementti venyy täsmälleen näkymän leveyteen ja korkeuteen. Ongelma ilmenee heti: video on lähes aina kuvattu 16:9-kuvasuhteella, mutta käyttäjän näyttö voi olla neliö, ultraleveä tai pystyasennossa. Tuloksena ovat ne mustat palkit, jotka pilaavat koko efektin.

Jos olet työskennellyt taustakuvien kanssa CSS:ssä, tiedät, että background-size-ominaisuudella on cover-arvo. Se pakottaa kuvan täyttämään säiliön kokonaan rajaten ylimenevän osan ja säilyttäen mittasuhteet. Tarvitsemme täsmälleen saman käyttäytymisen videolta. Ja se on olemassa.

Moderni ratkaisu: object-fit: cover

object-fit-ominaisuus luotiin juuri tätä varten. Se määrittää, miten korvattu elementti (kuva tai video) sopii säiliöönsä, ja cover-arvo toimii täsmälleen kuten 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
}

Video skaalautuu täyttämään säiliön kokonaan. Jos mittasuhteet eivät täsmää, selain rajaa ylimenevän osan ylhäältä ja alhaalta (tai vasemmalta ja oikealta) ja keskittää tuloksen automaattisesti. Ei mustia palkkeja.

Vuonna 2026 object-fit-ominaisuutta tukee 96,39% selaimista maailmanlaajuisesti (tiedot lähteestä Can I Use). Chrome versiosta 32, Firefox versiosta 36, Safari versiosta 10, Edge versiosta 79. Internet Explorer 11 ei tue sitä, mutta sen markkinaosuus lähestyy nollaa ja sen tukijakso on päättynyt.

Valtaosaan projekteista nämä kolme CSS-riviä riittävät. Videotausta on valmis.

Skaalausongelmat: mitä tapahtuu "konepellin alla"

Vaikka käyttäisitkin object-fit-ominaisuutta, on hyödyllistä ymmärtää mekaniikka. Kaksi skenaariota on mahdollista:

Ensimmäinen tilanne: näkymä on leveämpi kuin video (näytön kuvasuhde suurempi kuin 16:9). Video venyy leveydeltään täyttämään koko käytettävissä olevan alueen, mutta sen korkeus kasvaa näytön korkeutta suuremmaksi, joten sisältöä rajautuu ylhäältä ja alhaalta. Rajausalue keskitetään automaattisesti.

Toinen tilanne: näkymä on kapeampi (kuvasuhde alle 16:9, esimerkiksi pystyasento tabletilla). Video venyy korkeudeltaan täyttämään koko käytettävissä olevan alueen, leveys ylittää näkymän, rajausta tapahtuu vasemmalla ja oikealla, ja keskikohta säilyy.

object-fit: cover hoitaa molemmat skenaariot itsekseen. Mutta jos jostain syystä työskentelet ilman sitä, seuraava osio on sinua varten.

Klassinen temppu "ylisuurella säiliöllä"

Ennen kuin object-fit-ominaisuudesta tuli standardi, kehittäjät käyttivät näppärää tekniikkaa. Idea: tee säiliöstä tarkoituksella suurempi kuin sekä video että näkymä, jolloin selain keskittää sisällön automaattisesti.

Käytännössä se näyttää tältä:

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 queryt määrittävät, kummalla akselilla on ylivuotoa, ja asettavat koon, joka on näkymän monikerta, negatiivisella siirtymällä keskitystä varten. Video päätyy monta kertaa katselualuetta suuremmaksi, ja selain rajaa ja keskittää sen käyttäen korvattujen elementtien vakiomekanismia.

Nykyään tämä koodi on enemmänkin turvaverkko vanhoille projekteille. Mutta jos ylläpidät sivustoa, jossa object-fit ei jostain syystä ole käytettävissä, temppu toimii luotettavasti.

Tuotantokoodi: kaiken kokoaminen yhteen

Oikeassa projektissa videotausta on harvoin yksinään. Sen päällä on otsikko, painike, lomake, peittokuva tekstin luettavuuden parantamiseksi. Siksi video kääritään säiliöön, joka säilyttää näkymän mitat:

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-direktiivi tarkistaa object-fit-tuen ja korvaa varasäännöt. Moderni selain saa puhtaan kolmen rivin ratkaisun. Vanhentunut selain toimii media queryiden ja ylisuuren säiliön kautta.

Merkintäkieli on minimaalinen:

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>

Muutama yksityiskohta, jotka on helppo ohittaa. muted on pakollinen: selaimet estävät automaattisen toiston äänen kanssa. playsinline estää iOS:ää laajentamasta videota koko näyttöön. loop-määritystä tuskin tarvitsee muistuttaa, videotausta ilman toistoa näyttää virheeltä. Lisäksi: tarjoa neliömäinen lähde pystyasentoa varten media="(orientation: portrait)" -määrityksellä. Tavallinen 16:9-leike pystynäytöllä rajautuu lähes kokonaan ja muuttuu merkityksettömäksi välkkymiseksi.

⁉️🤔 Usein kysytyt kysymykset

Onko pakko käyttää nimenomaan <video>-elementtiä, vai voinko asettaa YouTube-videon taustaksi?

Voit käyttää YouTube-iframea taustana, mutta tietyin varauksin. Menetät puskuroinnin hallinnan, et voi poistaa käyttöliittymäelementtejä, ja mobiiliselaimet estävät usein iframen automaattisen toiston. Taustoihin itse isännöity <video> on aina parempi vaihtoehto. Jos upotat YouTuben, lisää parametrit ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Mikä videoformaatti kannattaa valita maksimaalisen yhteensopivuuden varmistamiseksi?

MP4:n (H.264) ja WebM:n (VP8/VP9) yhdistelmä kattaa kaikki modernit selaimet. MP4 on ensisijainen formaatti, WebM on Chromea ja Firefoxia varten (pienempi koko samalla laadulla). Resoluutio taustoihin: Full HD riittää. Korkeammat resoluutiot tuovat laatuetuja, jotka ovat taustassa huomaamattomia, kun taas tiedostokoko kasvaa neliöllisesti. Pidä videot muutaman megatavun kokoisina nopeaa latausta varten.

Mitä näytän käyttäjille videon latautuessa?

Aseta poster-attribuutti <video>-elementille, joko staattinen ensimmäinen ruutu tai erikseen valmisteltu kuva. CSS-varasuunnitelma: background-image säiliölle, jota object-fit ei peitä (se on alemmalla tasolla). Mobiilikäyttäjille hitailla yhteyksillä on parempi olla lataamatta videotaustaa lainkaan. Käytä prefers-reduced-data-media queryä ja korvaa staattisella kuvalla.

Miten saan tekstin videon päällä luettavaksi?

Lisää puoliläpinäkyvä peittokuva videon ja sisällön väliin: background: rgba(0, 0, 0, 0.4) säiliön ::after-pseudoelementille määrityksillä position: absolute; inset: 0; z-index: 1. Itse sisältö saa z-index: 2; position: relative. Valitse tummennuskerroin videon mukaan: vaaleampi materiaali tarvitsee enemmän, tummempi vähemmän.

Toimiiko tämä iOS:llä ja Androidilla?

Kyllä, tietyin varauksin. iOS vaatii playsinline-määrityksen (muuten video menee koko näytön soittimeen). iOS Safarin versioissa ennen versiota 10 object-fit ei ole tuettu, joten yllä olevan tuotantokoodin varasuunnitelma astuu voimaan. Android Chrome toimii oikein. Molemmilla alustoilla video käynnistyy vasta käyttäjän ensimmäisen vuorovaikutuksen jälkeen, jos muted ei ole asetettu, joten muted on ehdottoman pakollinen.

Mitä käyttää projektissasi: lyhyt tuomio

Jos rakennat verkkosivustoa vuonna 2026, käytä object-fit: cover -määritystä. Kolme CSS-riviä, ei JavaScriptiä, täysi responsiivisuus suoraan paketista. Selainten tuki on lähes universaalia, ja kattavuus vain kasvaa joka kuukausi.

Jos sinulla on vanha projekti, jossa on pakollinen tuki vanhalle Edgelle (ennen versiota 79) tai Firefoxille (ennen versiota 36), yllä olevan osion tuotantokoodi antaa sinulle molemmat maailmat: @supports ottaa käyttöön modernin ratkaisun, kun taas media queryt hoitavat loput.

Ja muista: videotausta on kakun kuorrutus. Jos leike painaa 20 megatavua ja latautuu kahdeksan sekuntia, käyttäjä lähtee ennen kuin näkee kauniin otsikkosi. Pakkaa, testaa mobiilinopeuksilla ja tarjoa aina staattinen varasuunnitelma.

Hyvien taustojen malja.