Sa maandud veebisaidile ja esimene asi, mida näed, ei ole staatiline pilt, vaid elav, hingav video, mis täidab kogu ekraani. See näeb kallis välja. See näeb professionaalne välja. Ja mis kõige tähtsam, see töötab igal seadmel, telefonist kuni ülilaia monitorini, ilma ühegi musta ribata.

Võid arvata, et midagi sellist nõuab JavaScripti, vaateava mõõtmisi ja keerulist matemaatikat. Mina arvasin samamoodi, kui esimest korda selle ülesandega tegelesin. Proovisin calc(), vaateava ühikuid, kirjutasin isegi suuruse muutmise skripti. See töötas Firefoxis, läks Chrome'is katki ja Safari's ei teinud absoluutselt mitte midagi.

Siis selgus, et CSS-il on juba mitu aastat omadus, mis teeb täpselt seda, mida vajame, ilma ühegi JS-i reata. Ja täna näitan sulle, kuidas ehitada täielikult reageeriv videotaust, mis käitub nagu background-size: cover, kuid elava video puhul.

💡 Kiire ülevaade:

• Sea videoelemendile fikseeritud positsioneering, mis katab kogu vaateava
• Rakenda object-fit cover, video kohandub automaatselt, kärpides üleliigse ja säilitades keskme
• Vanemate brauserite jaoks hoia varuvariant, kasutades meediapäringuid ja „ülemõõdulist konteinerit"
• Mähi kõik konteinerisse, mis on kasulik ülekatete, nuppude ja video peal oleva teksti jaoks
• Kohanda mobiilile: erinev allikas, playsinline ja varupilt

Põhiline lähenemine: fikseeritud positsioneering

Igasugune videotaust algab sellest, et <video> hõivab kogu vaatamisala. Seda tehakse position: fixed abil null-nihketega:

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

Element venib täpselt vaateava laiusele ja kõrgusele. Kohe tekib probleem: video on peaaegu alati filmitud 16:9 kuvasuhtega, kuid kasutaja ekraan võib olla ruudukujuline, ülilai või portreerežiimis. Tulemuseks on need mustad ribad, mis rikuvad kogu efekti.

Kui oled CSS-is taustapiltidega töötanud, siis tead, et background-size-il on cover väärtus. See sunnib pildi konteinerit täielikult täitma, kärpides üleliigse ja säilitades proportsioonid. Me vajame videolt täpselt sama käitumist. Ja see on olemas.

Kaasaegne lahendus: object-fit: cover

object-fit omadus loodi just selleks. See määrab, kuidas asendatav element (pilt või video) oma konteinerisse mahub, ja cover väärtus töötab täpselt nagu 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 skaleerub, et konteiner täielikult täita. Kui proportsioonid ei klapi, kärbib brauser üleliigse ülalt ja alt (või vasakult ja paremalt) ning tsentreerib tulemuse automaatselt. Mitte ühtegi musta riba.

1. aasta seisuga toetab object-fit 96,39% brauseritest ülemaailmselt (andmed saidilt Can I Use). Chrome alates versioonist 32, Firefox alates 36, Safari alates 10, Edge alates 79. Internet Explorer 11 seda ei toeta, kuid selle turuosa läheneb nullile ja selle tugiperiood on lõppenud.

Valdava enamuse projektide jaoks piisab neist kolmest CSS-i reast. Videotaust on valmis.

Skaleerimisprobleemid: mis toimub „kapoti all"

Isegi kui kasutad object-fit, on kasulik mõista mehaanikat. Võimalikud on kaks stsenaariumi:

Esimene olukord: vaateava on laiem kui video (ekraani kuvasuhe suurem kui 16:9). Video venib laiuses, et täita kogu saadaolev ala, kuid selle kõrgus muutub ekraani kõrgusest suuremaks, nii et sisu kärbitakse ülalt ja alt. Kärbitav ala tsentreeritakse automaatselt.

Teine olukord: vaateava on kitsam (kuvasuhe väiksem kui 16:9, näiteks tahvelarvuti portreerežiim). Video venib kõrguses, et täita kogu saadaolev ala, laius ületab vaateava, kärpimine toimub vasakul ja paremal ning keskkoht säilitatakse.

object-fit: cover käsitleb mõlemat stsenaariumi iseseisvalt. Aga kui sa mingil põhjusel töötad ilma selleta, siis järgmine osa on sulle.

Klassikaline nipp „ülemõõdulise konteineriga"

Enne kui object-fit muutus standardiks, kasutasid arendajad nutikat tehnikat. Idee: tee konteiner teadlikult suuremaks nii videost kui ka vaateavast ja brauser tsentreerib sisu automaatselt.

Praktikas näeb see välja nii:

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
}

Meediapäringud määravad, kummal teljel on ületäitumine, ja seavad suuruse, mis on vaateava kordne, negatiivse nihkega tsentreerimiseks. Video osutub vaatamisalast mitu korda suuremaks ja brauser kärbib ning tsentreerib selle, kasutades asendatavate elementide standardset mehhanismi.

Tänapäeval on see kood pigem turvavõrk pärandprojektide jaoks. Aga kui haldad saiti, kus object-fit pole mingil põhjusel saadaval, töötab see nipp usaldusväärselt.

Tootmiskood: kõige kokkupanek

Reaalses projektis eksisteerib videotaust harva iseseisvalt. Selle peal on pealkiri, nupp, vorm, ülekate teksti loetavuse tagamiseks. Seetõttu mähitakse video konteinerisse, mis säilitab vaateava mõõtmed:

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 direktiiv kontrollib object-fit tuge ja kirjutab varureeglid üle. Kaasaegne brauser saab puhta kolmerealise lahenduse. Aegunud brauser töötab meediapäringute ja ülemõõdulise konteineri kaudu.

Märgendus on minimaalne:

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>

Mõned detailid, mida on lihtne kahe silma vahele jätta. muted on kohustuslik: brauserid blokeerivad heliga automaatesituse. playsinline takistab iOS-il videot täisekraanile laiendamast. Pole vaja meelde tuletada loop kohta, korduseta videotaust näeb välja nagu viga. Samuti: paku portreerežiimi jaoks ruudukujulist allikat media="(orientation: portrait)" kaudu. Tavaline 16:9 klipp vertikaalsel ekraanil kärbitakse peaaegu täielikult ja muutub mõttetuks virvenduseks.

⁉️🤔 Korduma kippuvad küsimused

Kas on tingimata vaja kasutada just <video> elementi või võin seada YouTube'i video taustaks?

YouTube'i iframe'i saab taustana kasutada, kuid mööndustega. Kaotad kontrolli puhverdamise üle, ei saa eemaldada liideseelemente ja mobiilibrauserid blokeerivad sageli iframe'i automaatesituse. Taustade puhul on alati eelistatavam ise majutatud <video>. Kui lisad YouTube'i, lisa parameetrid ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Millise videoformaadi peaksin valima maksimaalse ühilduvuse tagamiseks?

MP4 (H.264) + WebM (VP8/VP9) kombinatsioon katab kõik kaasaegsed brauserid. MP4 on peamine formaat, WebM on Chrome'i ja Firefoxi jaoks (väiksem maht sama kvaliteedi juures). Taustade eraldusvõime: Full HD on piisav. Kõrgemad eraldusvõimed annavad kvaliteedivõidu, mis on taustal märkamatu, samas kui failimaht kasvab ruutfunktsioonis. Hoia videod kiire laadimise tagamiseks mõne megabaidi piires.

Mida peaksin kasutajatele näitama, kuni video laadib?

Sea <video> elemendile poster, kas staatiline esimene kaader või spetsiaalselt ettevalmistatud pilt. CSS-i varuvariant: background-image konteineril, mida object-fit ei kata (see asub allpool oleval kihil). Aeglase ühendusega mobiilikasutajatele on parem videotausta üldse mitte laadida. Kasuta prefers-reduced-data meediapäringut ja asenda staatilise pildiga.

Kuidas muuta video kohal olev tekst loetavaks?

Lisa video ja sisu vahele poolläbipaistev ülekate: background: rgba(0, 0, 0, 0.4) konteineri ::after pseudoelemendil koos position: absolute; inset: 0; z-index: 1. Sisu ise saab z-index: 2; position: relative. Vali tumenduskoefitsient konkreetse video põhjal: heledam materjal vajab rohkem, tumedam vähem.

Kas see töötab iOS-is ja Androidis?

Jah, teatud mööndustega. iOS nõuab playsinline (vastasel juhul läheb video täisekraanipleierisse). iOS Safari versioonides enne 10 ei toetata object-fit, seega rakendub ülaltoodud tootmiskoodi varuvariant. Android Chrome töötab korrektselt. Mõlemal platvormil käivitub video alles pärast kasutaja esimest interaktsiooni, kui muted pole seatud, seega on muted rangelt nõutav.

Mida oma projektis kasutada: lühike otsus

Kui ehitad veebisaiti 2026. aastal, kasuta object-fit: cover. Kolm rida CSS-i, ei mingit JavaScripti, täielik reageerivus kohe karbist võttes. Brauseritugi on peaaegu universaalne ja katvus ainult kasvab iga kuuga.

Kui sul on pärandprojekt, mis nõuab kohustuslikku tuge vanale Edge'ile (enne 79) või Firefoxile (enne 36), annab ülaltoodud jaotise tootmiskood sulle mõlemad maailmad: @supports võimaldab kaasaegset lahendust, samas kui meediapäringud püüavad ülejäänud kinni.

Ja pea meeles: videotaust on tordil glasuur. Kui klipp kaalub 20 megabaiti ja selle laadimine võtab kaheksa sekundit, lahkub kasutaja enne, kui näeb sinu ilusat pealkirja. Kompresseeri, testi mobiilse interneti kiirustel ja paku alati staatilist varuvarianti.

Tervituseks suurepärasele taustale.