Video di sfondo per siti web: peso, autoplay e accessibilità

In un video di sfondo per un sito web, un video muto e in loop scorre dietro una sezione, il più delle volte la hero, mentre titolo e pulsanti stanno sopra. Fatto bene, è leggero, silenzioso e facoltativo: parte in automatico senza audio, mostra un’immagine fissa finita prima di caricarsi, si ferma per chi preferisce meno movimento e non rende mai le parole più difficili da leggere. Fatto male, è la cosa più pesante e dispersiva della pagina.

Quando vale la pena usare un video di sfondo

Un video di sfondo si guadagna il posto quando il movimento è il messaggio: l’acqua per una scuola di nuoto, il vapore per una torrefazione, una materia che scorre lenta per un brand la cui estetica è la sua identità. Se il movimento è solo decorazione, un’alternativa più leggera di solito rende altrettanto bene. Confronta le opzioni prima di decidere.

L’HTML per un video di sfondo

Quattro attributi fanno il lavoro essenziale. muted permette al browser di avviarlo in automatico, dato che in genere i browser bloccano la riproduzione automatica con audio. playsinline impedisce a un iPhone di aprirlo a schermo intero. loop lo ripete, e poster mostra un’immagine fissa mentre si carica. Poiché è decorativo, nascondilo agli screen reader.

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         poster="/media/hero-poster.jpg" aria-hidden="true">
    <source src="/media/hero.webm" type="video/webm">
    <source src="/media/hero.mp4" type="video/mp4">
  </video>

  <div class="hero-content">
    <h1>Colour that moves with you</h1>
    <button class="hero-pause" type="button">Pause background</button>
  </div>
</section>

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: #120a2e; /* shows before the poster arrives */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills any shape without stretching */
}
.hero-content {
  position: relative; /* sits above the video */
}

La guida di MDN all’elemento video elenca ogni attributo. Ricorda che la riproduzione automatica è una richiesta, non una garanzia: alcuni telefoni in modalità risparmio energetico non la avviano. Per questo il poster deve sembrare un design finito anche da solo.

Mantenere leggero il file video

Il video è di solito il file più grande di qualsiasi pagina che ne abbia uno. Le riprese morbide e lente si comprimono molto meglio di quelle nitide e movimentate, quindi la scelta di design è anche una scelta di prestazioni. Tieni il loop breve, intorno agli 8 a 15 secondi, rimuovi del tutto la traccia audio e non servire una dimensione più grande di quella che la hero mostra davvero. Fissa un budget di peso prima di esportare, e verifica il risultato reale nel pannello di rete del browser.

# MP4 (H.264): silent, web-ready, starts playing before it fully downloads
ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4

# WebM (VP9): often smaller at similar quality
ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \
  -vf "scale=1920:-2" hero.webm

# Poster: the first frame as a JPEG
ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

Hero del sito 1920 × 1080

1920 × 1080

Ritaglio per telefono

1080 × 1920

Movimento ridotto e un pulsante di pausa

Alcuni visitatori impostano il dispositivo per ridurre il movimento perché li fa sentire storditi o male. Rispettalo mostrando il poster al posto del video. A parte questo, il criterio WCAG Pause, Stop, Hide chiede che i contenuti in movimento che partono da soli e durano più di cinque secondi, accanto ad altri contenuti, si possano mettere in pausa. Un piccolo pulsante di pausa visibile basta.

const video = document.querySelector('.hero-video')
const button = document.querySelector('.hero-pause')
const reduce = matchMedia('(prefers-reduced-motion: reduce)')

function follow() {
  if (reduce.matches) video.pause()
  else video.play().catch(() => {}) // the browser may still refuse
}
reduce.addEventListener('change', follow)
follow()

button.addEventListener('click', () => {
  if (video.paused) {
    video.play()
    button.textContent = 'Pause background'
  } else {
    video.pause()
    button.textContent = 'Play background'
  }
})

Il movimento ridotto spiega l’impostazione e cos’altro ridurre.

Testo leggibile su un video di sfondo

Il testo sopra un video deve leggersi su ogni fotogramma, non solo sul poster. La soluzione abituale è una velatura scura su tutto il video, che funziona ma lo appiattisce. Opzioni migliori: scegli riprese calme con una zona quieta dove vanno le parole, tieni il movimento più luminoso lontano dal titolo e usa un peso grande e marcato. La nostra guida al testo su immagine ha sette tecniche che valgono anche per il video.

Checklist per il video di sfondo

1. 1

   Decidi se deve proprio essere un video

   Riprese reali, o movimento che deve apparire identico ovunque. Altrimenti valuta il CSS o uno shader.

2. 2

   Tienilo breve, lento e silenzioso

   Da 8 a 15 secondi, nessuna traccia audio, un loop che combacia.

3. 3

   Esporta due formati e un poster

   WebM e MP4, non più grandi di come vengono mostrati, più un primo fotogramma fisso.

4. 4

   Usa i quattro attributi

   autoplay, muted, loop, playsinline, con poster e aria-hidden.

5. 5

   Rispetta le preferenze sul movimento

   Mostra il poster per il movimento ridotto e aggiungi un pulsante di pausa.

6. 6

   Prova su un telefono vero

   Controlla il tempo di caricamento con i dati mobili, la modalità risparmio energetico e il ritaglio verticale.

Per il design della hero in sé, vedi gli sfondi per la hero di un sito. Se il tuo sfondo in movimento è un Mark di Gradiently, puoi esportarlo come video MP4 in loop fino a 1080p e usarlo esattamente così.