Skip to content

Alt om WordPress, webutvikling — og mer til

💡 Hvordan optimalisere bakgrunnsvideo for nettstedet ditt: formater, komprimering og plugins

💡 Hvordan optimalisere bakgrunnsvideo for nettstedet ditt: formater, komprimering og plugins

Bakgrunnsvideo får et nettsted til å føles levende. Men når den veier 40 MB og bruker fire sekunder på å lastes, forlater de besøkende siden før de ser innholdet ditt.

Ifølge HTTP Archive-data for 2025 utgjør video opptil 20% av totalvekten til medietunge sider. Google vektlegger lastehastighet i rangeringen, og Core Web Vitals straffer treg LCP. Tung bakgrunnsvideo skader både brukere og SEO.

Nedenfor finner du en trinnvis algoritme for å komprimere bakgrunnsvideo til 5 MB uten synlig kvalitetstap. Med gratisverktøy, ingen registrering, ingen vannmerker.

💡 Rask oversikt:

  • Formater: klargjør MP4 (H.264) + WebM (VP9), to filer dekker alle moderne nettlesere
  • Verktøy: HandBrake, gratis, åpen kildekode, med presis kontroll over bitrate og oppløsning
  • For Mac: innebygd QuickTime-eksport, ingen installasjon av tredjepartsprogramvare
  • YouTube-triks: last opp, YouTube komprimerer på nytt, last ned den optimaliserte MP4-en tilbake
  • Nettbaserte tjenester: CloudConvert, VideoSmaller, Clipchamp, når du ikke vil installere programvare
  • WordPress: mb.YTPlayer og Video Background-utvidelser, bakgrunnsvideo uten å redigere temaet

Formater: hvorfor du trenger to filer

Bakgrunnsvideo må spilles av problemfritt i alle nettlesere. Ett enkelt format holder ikke.

MP4 (H.264), primærformatet. Fungerer i Safari, Chrome, Edge, Opera og på alle mobile enheter. Dette er grunnlinjen som alle nettlesere forstår uten unntak.

WebM (VP9), tilleggsformatet. Filen er merkbart mindre ved samme kvalitet. Chrome og Firefox prioriterer WebM, noe som sparer brukerens båndbredde. Ifølge Google Developers gir VP9 opptil 50% bitratebesparelse sammenlignet med H.264 ved identisk visuell kvalitet.

For mobil, et statisk JPG-postbilde. Hvis nettleseren nekter automatisk avspilling (båndbreddesparing, tregt nettverk), ser brukerne et bilde i stedet for tomrom.

Oppløsning over 720p er sjelden nødvendig for bakgrunner. En bredde på 1280 piksler dekker en hel bærbar skjerm, og filen veier flere ganger mindre enn Full HD. Sjekk på mockupen din: 720p vil sannsynligvis dekke behovet ditt med god margin.

Trinn 1: HandBrake, hovedverktøyet

HandBrake er en gratis videokonverterer med åpen kildekode for Windows, Mac og Linux. Den gir full kontroll over kodek, bitrate og oppløsning. Ingen vannmerker, ingen registrering, ingen filstørrelsesbegrensninger.

HandBrake-grensesnitt: konfigurering av videokomprimering for nettet

Algoritme for komprimering av bakgrunnsvideo:

  • Last ned HandBrake fra det offisielle nettstedet og åpne kildevideofilen din.
  • I fanen Summary velger du formatet MP4 og krysser av for Web Optimized. Dette flytter metadata til begynnelsen av filen, slik at videoen starter umiddelbart uten å vente på full nedlasting.
  • I fanen Dimensions setter du bredden til 1280. Høyden justeres automatisk. La filteret Anamorphic stå på Automatic.
  • I fanen Video velger du kodeken H.264 (x264). Sett glidebryteren Constant Quality i området 22-26 RF. Høyere tall betyr mindre filer. Optimalt: 24 RF.
  • Fjern lydsporet. Bakgrunnsvideo er lydløs som standard; fjern avkrysningen i fanen Audio.
  • Klikk Start Encode. En fil på 30-50 MB komprimeres til 3-8 MB. Kvaliteten forblir akseptabel for bakgrunner.

For WebM-versjonen gjentar du de samme trinnene, men i trinn 2 velger du formatet WebM, og i trinn 4 velger du kodeken VP9.

I praksis reduserer én enkelt gjennomkjøring i HandBrake størrelsen på bakgrunnsvideoen med 5-10 ganger. Besøkende merker ikke forskjellen, og siden lastes 2-3 sekunder raskere. Dette er det første vi gjør med enhver video før vi laster den opp til et nettsted.

Trinn 2: Komprimering på Mac med innebygde verktøy

Hvis du er på macOS, trenger du ikke installere noe. Innebygd QuickTime-eksport håndterer grunnleggende komprimering.

  • Åpne videofilen i QuickTime Player.
  • Velg File → Export → 720p.
  • Angi navn og mappe. Filen lagres som MP4 med H.264-kodek.

Denne metoden gir ikke finmasket bitratekontroll, men den er tilstrekkelig for raske resultater. En kildefil på 60 MB blir 8-12 MB uten ekstra innsats.

Et mer avansert innebygd alternativ er iMovie. Importer videoen, velg File → Share → File, velg 720p-oppløsning og "Medium" kvalitet. iMovie gir litt bedre kontroll over endelig størrelse enn QuickTime. For finjustert arbeid er HandBrake fortsatt bedre, men når du trenger noe "her og nå", holder Mac-verktøyene.

Trinn 3: Komprimering via YouTube, et raskt triks

Den lateste måten å få optimalisert video på er å kjøre den gjennom YouTube.

  • Last opp videoen til YouTube. Du kan sette den til "Unlisted" slik at den ikke vises i offentlige søk.
  • Vent til behandlingen er fullført. YouTube transkoder automatisk videoen til alle moderne formater og oppløsninger.
  • Last ned den optimaliserte MP4-en tilbake ved hjelp av en konverterer, for eksempel CloudConvert.

Resultat: YouTubes komprimeringsalgoritmer, noen av de beste i bransjen. Filen blir liten og visuelt ren. Denne metoden hjelper når HandBrake ikke er tilgjengelig og du trenger komprimering umiddelbart.

En alternativ tilnærming er å ikke laste opp videofilen til din egen hosting i det hele tatt. Bygg inn YouTube-videoen som bakgrunn via mb.YTPlayer-utvidelsen (avsnitt nedenfor). Dette sparer serverplass og båndbredde, men gir mindre kontroll over avspillingen.

Nettbaserte verktøy: når du ikke vil installere programvare

Hvis du ikke vil installere HandBrake og filen er liten, fungerer nettleserbaserte komprimatorer fint.

Verktøy

Pris

Begrensninger

Formater

CloudConvert

Gratis opptil 25 konverteringer per dag

Filstørrelsesgrense i gratisversjonen

MP4, WebM, MOV og 200+ til

VideoSmaller

Helt gratis

Kun MP4

Filer opptil 500 MB

Clipchamp

Gratis (basic)

Eksport opptil 1080p

MP4, WebM, MOV

CloudConvert er en universell arbeidshest. Den støtter over 200 formater og konverterer MP4 til WebM med ett klikk. Gratisgrensen er nok for sporadisk optimalisering. Ulempe: hastigheten avhenger av serverkøen.

VideoSmaller er en minimalistisk tjeneste for én oppgave: komprimering av MP4. Grensesnitt med to knapper: last opp og last ned. Ingen registrering kreves. Fungerer ikke med WebM eller MOV, kun MP4.

Clipchamp er en videoredigerer fra Microsoft med innebygd eksport. Gratisversjonen tillater eksport opptil 1080p uten vannmerker på ditt eget innhold. Vannmerker vises kun ved bruk av Clipchamps lagerressurser. For komprimering av din egen video er det et fungerende alternativ.

Merk: nettbaserte tjenester laster opp video til tredjepartsservere. For private eller konfidensielle materialer, bruk HandBrake lokalt.

WordPress-utvidelser for bakgrunnsvideo

Hvis nettstedet ditt kjører på WordPress, er det enklere å bygge inn bakgrunnsvideo med utvidelser. Du slipper å redigere temaet eller skrive CSS.

mb.YTPlayer bygger inn YouTube-video som bakgrunn for en side eller seksjon. Fordelen er at selve videoen ligger på YouTubes servere og belaster ikke din hosting. Utvidelsen legger til en shortcode; sett den inn der det trengs, så spilles videoen av som bakgrunn. På mobile enheter starter videoen ved første skjermtrykk. Utvidelsen har 1 000+ aktive installasjoner og en vurdering på 4,1 på WordPress.org.

🔗 mb.YTPlayer på WordPress.org

Video Background er en løsning for dine egne videofiler. Du angir containeren, en lenke til MP4 og en lenke til WebM. Utvidelsen oppdager automatisk nettleseren og serverer riktig format. Kompatibel med WPBakery og SiteOrigin. Minimal konfigurasjon.

🔗 Video Background på WordPress.org

Easy Video Background WPCodeCanyon er et betalt alternativ med utvidede funksjoner: timer for automatisk avspilling, tilpassbart overlegg, volumkontroll. Engangsbetaling.

Hvis videoen din allerede ligger på YouTube, bruk mb.YTPlayer. Hvis du har dine egne MP4- og WebM-filer på din hosting, bruk Video Background. Trenger du finjusterte visningsinnstillinger? Easy Video Background WP.

En visuell demonstrasjon av komprimeringsprosessen, fra formatvalg til endelig eksport:

⁉️🤔 Ofte stilte spørsmål

Må bakgrunnsvideo være lydløs?

Ja. Automatisk avspilling med lyd er irriterende og forbudt av de fleste nettleserpolicyer. Chrome og Safari har blokkert automatisk avspilling med lyd siden 2018. Fjern lydsporet under eksport, så blir filen merkbart lettere.

Hvor stor bør en bakgrunnsvideo være?

En god målestokk er opptil 5 MB for 10-15 sekunder med 720p bakgrunn. Noe tyngre enn 8 MB bremser lastingen merkbart på mobilnett. HandBrake med RF 24 ved 720p holder seg vanligvis innenfor dette området.

MP4 eller WebM: hva er best for bakgrunner?

Begge. MP4 er for Safari og iOS (de forstår ikke WebM). WebM er for Chrome og Firefox (mindre fil ved samme kvalitet). Riktig oppmerking med video-taggen velger automatisk riktig format. Klargjør alltid begge filene.

Kan man bruke YouTube-video som bakgrunn direkte?

Teknisk sett ja, via YouTube IFrame API eller mb.YTPlayer-utvidelsen. Men det finnes ulemper: YouTube-kontroller er synlige ved hover, annonser kan avbryte bakgrunnen, forhåndslasting er tregere enn med egne filer. For bakgrunner uten kompromisser er det bedre å laste opp egne MP4 og WebM.

Hva bør vises på mobil hvis videoen ikke lastes?

Et statisk JPG-postbilde: første bilde i videoen eller et spesiallaget bilde. Angis via poster-attributtet i video-taggen. De fleste WordPress-utvidelser legger automatisk til et postbilde fra første bilde.

Er optimalisering verdt innsatsen?

Forskjellen mellom en rå MOV på 40 megabyte og en komprimert MP4 på 4 megabyte er 2-3 sekunder av sidens lastetid. For besøkende på mobilnett avgjør disse sekundene om de blir eller drar.

Gratis HandBrake, innebygd Mac-eksport eller fem minutter i CloudConvert: minimal innsats, umiddelbare resultater. Siden flyr, Google er fornøyd, besøkende ser video i stedet for en forhåndslaster.

Hvis du er på WordPress, installer mb.YTPlayer eller Video Background og glem manuell koding. Hvis du har egne filer, klargjør alltid MP4 + WebM og hold endelig størrelse under 5 MB. Dette er grunnlinjen som fungerer på ethvert nettsted, fra landingssider til nettbutikker.