Videobakgrunner, autoplay og lazy loading: en guide for utviklere

Utvidet og oppdatert versjon av dette emnet: Video-bakgrunner, autoplay og Core Web Vitals i WordPress.

Videobakgrunner i toppen av nettsiden (hero) er et velkjent grep i moderne design. Riktig utført skaper de visuell dybde og fanger oppmerksomheten med en gang siden åpnes.

Samtidig er feilplassert video en av de vanligste årsakene til treg First Contentful Paint (FCP) og høy Total Blocking Time (TBT). Setter du inn en standard YouTube- eller Vimeo-iframe i toppen av siden, må nettleseren hente store JavaScript-pakker, etablere eksterne tilkoblinger og utføre tidkrevende parsing før brukeren får se kjerneinnholdet.

I denne veiledningen går vi gjennom gjeldende nettleserregler, parametere for eksterne spillere, metoder for lat innlasting og krav til universell utforming.

#Hvordan nettlesernes retningslinjer for autoplay fungerer

Alle store nettlesere (Chrome, Safari, Firefox og Edge) blokkerer uønsket lydavspilling for å spare batteri og unngå forstyrrelser for brukerne.

For at en bakgrunnsvideo skal starte av seg selv, må <video>-koden ha disse fire attributtene:

1. autoplay
2. muted (lyden er dempet)
3. playsinline (nødvendig for iOS)
4. loop

Ifølge dokumentasjonen på MDN Web Docs rammer ikke sperren videoer som mangler lydspor, eller der lyden er eksplisitt slått av. Videoer med aktiv lyd regnes som hørbare og blokkeres konsekvent. Det sikreste er derfor å fjerne lydsporet helt fra videofilen ved eksport.

#Chrome og beregningen av Media Engagement Index

Google Chrome innførte sine nåværende retningslinjer i versjon 66 (april 2018). Hovedregelen er enkel: dempet autoplay er alltid tillatt.

Avspilling med lyd krever en aktiv brukerhandling eller en høy score i Media Engagement Index (MEI). MEI måler hvor mye medier en person tidligere har konsumert på nettstedet. For å telle må avspillingen vare i over sju sekunder, ha lyd på, skje i en aktiv fane og ha en videostørrelse på minst 200x140 piksler. En stum bakgrunnsvideo oppfyller aldri disse kravene, og det er derfor nytteløst å håpe at Chrome skal starte den med lyd.

#WebKit og reglene for video på iOS enheter

Apple oppdaterte reglene for Safari på iOS fra og med iOS 10. Elementer merket med <video muted> har lov til å starte automatisk uten at brukeren trykker på skjermen. Attributtet playsinline sørger for at videoen vises rett i nettsiden fremfor å åpne telefonens innebygde fullskjermspiller.

WebKit har to spesielle egenskaper som er verdt å huske på: Dersom videoen forsøker å skru på lyd uten at brukeren har klikket, stopper den momentant. I tillegg settes avspillingen på pause så snart videoen rulles ut av det synlige skjermbildet.

#Håndtering av autoplay i Firefox

Mozilla Firefox følger et tilsvarende mønster. Innstillingen media.autoplay.allow-muted tillater stum avspilling som standard. Samtidig hindrer regelen media.block-autoplay-until-in-foreground at sider som åpnes i bakgrunnsfaner begynner å spille av video før brukeren faktisk klikker seg inn på fanen.

#Håndtere avviste løfter ved automatisk avspilling

Ingen nettleser garanterer at automatisk avspilling vil fungere under alle forhold. Å kalle metoden .play() i JavaScript returnerer et Promise som blir avvist (rejected) hvis strømsparing eller lokale regler blokkerer avspillingen. God praksis er å fange opp feilen NotAllowedError:

const video = document.querySelector('.hero-video');
video.play().catch((error) => {
  if (error.name === 'NotAllowedError') {
    const playButton = document.querySelector('.hero-play');
    if (playButton) {
      playButton.hidden = false;
    }
  }
});

Det finnes et eksperimentelt grensesnitt kalt navigator.getAutoplayPolicy(), men foreløpig støttes det i hovedsak bare av Firefox. Å håndtere avviste Promises er derfor den eneste metoden som fungerer på tvers av alle plattformer.

#Parametere for bakgrunnsvideo på YouTube og Vimeo

Dersom du ikke ønsker å drifte videofilene lokalt, kan du justere URL-parameterne for å skjule unødvendig grensesnitt.

#Vimeo bakgrunnsmodus med parameteren background

Vimeo tilbyr en egen bakgrunnsmodus som er skreddersydd for toppen av nettsider:

<iframe src="https://player.vimeo.com/video/12345678?background=1&dnt=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

• background=1: Skjuler fremdriftslinje og knapper, demper lyden, starter videoen med en gang og setter den i uendelig løkke.
• Krav til abonnement: Vimeos dokumentasjon opplyser at background=1 kun virker på betalte planer (Starter, Standard, Advanced, Pro, Business). Det fungerer ikke på gratisversjonen.
• dnt=1: Forhindrer at spilleren lagrer sporingsdata og analytiske informasjonskapsler, noe som hjelper på personvernet.

#Parametere for YouTube og tekniske begrensninger

YouTube har ikke én enkelt bakgrunnsknapp, så her må du sette sammen flere parametere manuelt:

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID&playsinline=1" frameborder="0" allow="autoplay; encrypted-media"></iframe>

• Løkkeavspilling: For at loop=1 skal fungere på én enkelt video, krever YouTube at parameteren playlist settes til nøyaktig samme video-ID. Uten dette stopper videoen etter første avspilling.
• playsinline=1: Hindrer fullskjermvisning på mobile Apple-enheter.
• mute=1: Forsøker å dempe lyden ved start. For full kontroll bør du bruke YouTube IFrame Player API og kalle .mute() før avspilling.
• rel=0: Begrenser relaterte forslag til samme kanal, men fjerner ikke rutenettet helt ved avslutning.

#Delegering av autoplay rettigheter til iframes

Dersom en iframe kommer fra et annet domene, krever nettleserne at hovedsiden gir tillatelse via attributtet allow="autoplay". I tillegg kan webserveren styre dette gjennom HTTP-headeren Permissions-Policy:

Permissions-Policy: autoplay=(self "https://player.vimeo.com")

Pass på at sikkerhetsreglene på serveren ikke sperrer for de eksterne videoleverandørene du benytter.

#Bruk av videofasader for raskere innlasting

Å laste inn en komplett iframe i toppen av siden stjeler verdifulle ressurser fra nettleserens hovedtråd. En fasade erstatter den tunge spilleren med et lett forhåndsvisningsbilde inntil brukeren foretar en handling.

#Raske YouTube innbygginger med lite-youtube

Det åpne biblioteket lite-youtube-embed fra Paul Irish er en referanse for god ytelse:

<link rel="stylesheet" href="/vendor/lite-yt-embed.css">
<script src="/vendor/lite-yt-embed.js"></script>
<lite-youtube videoid="goiWrNiaT0I" playlabel="Spill av video"></lite-youtube>

Elementet viser et statisk bilde først. Når brukeren fører musepekeren over eller fokuserer på elementet, opprettes det en tidlig nettverkstilkobling til youtube-nocookie.com. Først når elementet trykkes på, settes den virkelige iframen inn, noe som kan spare over 1 MB med JavaScript ved sideåpning.

#Lat innlasting under bretten med IntersectionObserver

For videoer som ligger lenger ned på siden og skal starte av seg selv når de blir synlige, kan du benytte IntersectionObserver:

document.addEventListener("DOMContentLoaded", function() {
  const lazyVideos = Array.from(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    const videoObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const video = entry.target;
          const sources = video.querySelectorAll("source");
          
          sources.forEach((source) => {
            if (source.dataset.src) {
              source.src = source.dataset.src;
            }
          });

          video.load();
          video.classList.remove("lazy");
          observer.unobserve(video);
        }
      });
    });

    lazyVideos.forEach((lazyVideo) => {
      videoObserver.observe(lazyVideo);
    });
  }
});

Dette mønsteret sikrer at nettverket ikke belastes før brukeren faktisk er på vei mot den aktuelle seksjonen.

#Nettleserstøtte for lazy loading på videoelementer

Nyere Chromium-nettlesere tester ut støtte for loading="lazy" direkte på <video>. Ettersom Safari og Firefox mangler dette foreløpig, er IntersectionObserver fortsatt den tryggeste løsningen i produksjon.

#Egenhosting av bakgrunnsvideo i MP4 og WebM format

Ved å drifte videofilene lokalt får du full kontroll over komprimering, lagringstid i nettleserens hurtigbuffer og fravær av tredjeparts sporingsskript:

<video autoplay muted loop playsinline poster="/images/hero-poster.avif" width="1280" height="720" class="hero-video">
  <source src="/videos/hero.webm" type="video/webm">
  <source src="/videos/hero.mp4" type="video/mp4">
</video>

Oppgi alltid faste width- og height-mål. Da kan nettleseren reservere riktig proporsjon i sideoppsettet med en gang, noe som forhindrer uønsket layoutforskyvning (CLS).

#Riktig bruk av preload attributtet

Attributtet preload har tre moduser: none, metadata og auto. For videoer som ikke starter automatisk bør du bruke preload="none". Men når autoplay er aktivt, vil nettleseren se bort fra dette og starte buffring umiddelbart.

#Konvertere animerte GIF filer til MP4 og WebM

Tradisjonelle GIF-animasjoner er svært ressurskrevende. Ved å konvertere en GIF til moderne videoformater kan filstørrelsen ofte reduseres med mer enn 80 prosent:

# Konvertere GIF til MP4
ffmpeg -i animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p animation.mp4

# Konvertere GIF til WebM
ffmpeg -i animation.gif -c vp9 -b:v 0 -crf 41 animation.webm

#Hvordan bakgrunnsvideo påvirker Largest Contentful Paint

Når en video opptar det øverste synlige feltet, er den nesten alltid en kandidat for Largest Contentful Paint (LCP). Ifølge standarden fastsettes LCP-tidspunktet for et videoelement enten når forhåndsvisningsbildet (poster) er ferdig lastet, eller når første videoramme vises (det som inntreffer først).

I praksis er det poster-bildet som avgjør LCP-resultatet ditt. Klargjør dette bildet i AVIF- eller WebP-format, legg det inn i HTML-koden fra start og forhåndslast det med høy prioritet:

<link rel="preload" as="image" href="/images/hero-poster.avif" fetchpriority="high">

#Krav til universell utforming for bakgrunnsvideo

Visuelle effekter må aldri skape problemer for personer med kognitive utfordringer eller overfølsomhet for bevegelse.

#Suksesskriterium WCAG 2.2.2 og kravet om pauseknapp

Etter WCAG-kriterium 2.2.2 (Pause, stopp, skjul) på nivå A må all bevegelse som starter automatisk, varer lenger enn fem sekunder og vises sammen med annet innhold, kunne pauses, stoppes eller skjules av brukeren.

En videobakgrunn som går i løkke oppfyller alle disse tre vilkårene. Du må derfor inkludere en synlig knapp som kan nås med tastatur:

<button type="button" class="hero-video-toggle" aria-pressed="false">Sett bakgrunnsvideo på pause</button>

#Respektere brukerens valg om redusert bevegelse

Mange brukere slår på innstillingen for redusert bevegelse i operativsystemet. Nettsiden din bør lytte til dette via prefers-reduced-motion:

const video = document.querySelector('.hero-video');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  video.removeAttribute('autoplay');
  video.pause();
}

Når redusert bevegelse er valgt, lar du bare det statiske poster-bildet stå synlig uten animasjon.

#Viktigste råd for ytelse med bakgrunnsvideo

1. Sikre demping: Bruk alltid muted og playsinline, og fjern gjerne lydsporet fra kildekoden.
2. Bruk Vimeos bakgrunnsmodus: Parameteren ?background=1 på betalte kontoer fjerner all unødvendig grafikk automatisk.
3. Husk spilleliste i YouTube: Sett playlist=ID med samme ID for å få videoen til å gå i løkke.
4. Optimaliser LCP: Forhåndslast poster-bildet med fetchpriority="high".
5. Følg WCAG-kravene: Legg alltid inn en tilgjengelig pauseknapp for animasjoner som går i løkke.

Trenger du faglig bistand til å gjennomgå nettsidens ytelse eller forbedre Core Web Vitals, se våre tjenester som WordPress-utvikler og WooCommerce-utvikler. Ta gjerne kontakt med oss for en teknisk prat.