Atterri su un sito web e la prima cosa che vedi non è un’immagine statica, ma un video vivo e pulsante che riempie l’intero schermo. Sembra costoso. Sembra professionale. E, cosa più importante, funziona su qualsiasi dispositivo, da un telefono a un monitor ultrawide, senza una sola barra nera.

Potresti pensare che una cosa del genere richieda JavaScript, misurazioni del viewport e calcoli complessi. Lo pensavo anch’io la prima volta che ho affrontato questo compito. Ho provato calc(), le unità viewport, ho persino scritto uno script per il resize. Funzionava su Firefox, si rompeva su Chrome e su Safari restava completamente muto.

Poi è saltato fuori che i CSS hanno una proprietà, ormai da diversi anni, che fa esattamente ciò che ci serve, senza una sola riga di JS. E oggi ti mostro come costruire uno sfondo video completamente responsive che si comporta come background-size: cover, ma per video live.

💡 Panoramica rapida:

• Imposta l’elemento video con posizionamento fixed che copra l’intero viewport
• Applica object-fit cover, il video si adatta automaticamente ritagliando l’eccesso e mantenendo il centro
• Per i browser più vecchi, tieni un fallback con media query e un «contenitore sovradimensionato»
• Avvolgi tutto in un contenitore, utile per overlay, pulsanti e testo sopra il video
• Adatta per il mobile: sorgente diversa, playsinline e un’immagine di fallback

Approccio base: posizionamento fixed

Qualsiasi sfondo video inizia facendo occupare al <video> l’intera area di visualizzazione. Si ottiene con position: fixed e offset a zero:

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

L’elemento si estende esattamente alla larghezza e all’altezza del viewport. Il problema sorge subito: il video è quasi sempre girato in formato 16:9, ma lo schermo dell’utente potrebbe essere quadrato, ultrawide o verticale. Il risultato sono quelle barre nere che rovinano tutto l’effetto.

Se hai lavorato con immagini di sfondo nei CSS, sai che background-size ha un valore cover. Costringe l’immagine a riempire completamente il contenitore, ritagliando l’eccesso e preservando le proporzioni. Abbiamo bisogno esattamente dello stesso comportamento dal video. Ed esiste.

Soluzione moderna: object-fit: cover

La proprietà object-fit è stata creata proprio per questo. Determina come un elemento sostituito (immagine o video) si adatta al suo contenitore, e il valore cover funziona esattamente come 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
}

Il video si ridimensiona per riempire completamente il contenitore. Se le proporzioni non corrispondono, il browser ritaglia l’eccesso dall’alto e dal basso (o da sinistra e destra) e centra automaticamente il risultato. Nessuna barra nera.

Nel 2026, object-fit è supportato dal 96,39% dei browser a livello globale (dati da Can I Use). Chrome dalla versione 32, Firefox dalla 36, Safari dalla 10, Edge dalla 79. Internet Explorer 11 non lo supporta, ma la sua quota di mercato è prossima allo zero e il suo periodo di supporto è terminato.

Per la stragrande maggioranza dei progetti, queste tre righe di CSS sono sufficienti. Lo sfondo video è pronto.

Problemi di ridimensionamento: cosa succede «sotto il cofano»

Anche se usi object-fit, è utile capire la meccanica. Sono possibili due scenari:

Prima situazione: il viewport è più largo del video (rapporto d’aspetto dello schermo maggiore di 16:9). Il video si allarga in larghezza per riempire tutta l’area disponibile, ma la sua altezza diventa maggiore dell’altezza dello schermo, quindi il contenuto viene ritagliato in alto e in basso. L’area di ritaglio è centrata automaticamente.

Seconda situazione: il viewport è più stretto (rapporto d’aspetto inferiore a 16:9, per esempio orientamento verticale su un tablet). Il video si allunga in altezza per riempire tutta l’area disponibile, la larghezza supera il viewport, il ritaglio avviene a sinistra e a destra e il centro viene preservato.

object-fit: cover gestisce entrambi gli scenari da solo. Ma se per qualche motivo lavori senza, la prossima sezione fa per te.

Trucco classico con un «contenitore sovradimensionato»

Prima che object-fit diventasse uno standard, gli sviluppatori usavano una tecnica ingegnosa. L’idea: rendere il contenitore deliberatamente più grande sia del video sia del viewport, e il browser centrerà il contenuto automaticamente.

In pratica, si presenta così:

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
}

Le media query determinano quale asse è in overflow e impostano una dimensione che è un multiplo del viewport, con un offset negativo per la centratura. Il video finisce per essere molte volte più grande dell’area di visualizzazione, e il browser lo ritaglia e lo centra usando il meccanismo standard per gli elementi sostituiti.

Oggi questo codice è più una rete di sicurezza per progetti legacy. Ma se stai mantenendo un sito dove object-fit non è disponibile per qualche motivo, il trucco funziona in modo affidabile.

Codice di produzione: mettiamo tutto insieme

In un progetto reale, uno sfondo video raramente esiste da solo. Sopra di esso ci sono un titolo, un pulsante, un modulo, un overlay per la leggibilità del testo. Ecco perché il video è avvolto in un contenitore che mantiene le dimensioni del viewport:

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
}

La direttiva @supports verifica il supporto di object-fit e sovrascrive le regole di fallback. Un browser moderno ottiene la soluzione pulita a tre righe. Uno obsoleto funziona tramite media query e il contenitore sovradimensionato.

Il markup è minimo:

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>

Alcuni dettagli facili da dimenticare. muted è obbligatorio: i browser bloccano l’autoplay con l’audio. playsinline impedisce a iOS di espandere il video a schermo intero. Non serve ricordarti di loop, uno sfondo video senza loop sembra un errore. Inoltre: fornisci una sorgente quadrata per l’orientamento verticale tramite media="(orientation: portrait)". Una clip standard 16:9 su uno schermo verticale verrà ritagliata quasi interamente e si trasformerà in un tremolio senza senso.

⁉️🤔 Domande frequenti

È necessario usare specificamente <video> o posso impostare un video di YouTube come sfondo?

Puoi usare un iframe di YouTube come sfondo, ma con dei limiti. Perdi il controllo sul buffering, non puoi rimuovere gli elementi dell’interfaccia e i browser mobile spesso bloccano l’autoplay degli iframe. Per gli sfondi, un <video> self-hosted è sempre preferibile. Se incorpori YouTube, aggiungi i parametri ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Quale formato video dovrei scegliere per la massima compatibilità?

La combinazione MP4 (H.264) + WebM (VP8/VP9) copre tutti i browser moderni. MP4 è il formato principale, WebM è per Chrome e Firefox (dimensioni inferiori a parità di qualità). Risoluzione per gli sfondi: il Full HD è sufficiente. Risoluzioni più alte danno miglioramenti di qualità impercettibili in uno sfondo, mentre la dimensione del file cresce in modo quadratico. Mantieni i video entro pochi megabyte per un caricamento veloce.

Cosa dovrei mostrare agli utenti mentre il video si carica?

Imposta poster sul <video>, con un primo fotogramma statico o un’immagine preparata ad hoc. Fallback CSS: background-image sul contenitore, che object-fit non coprirà (sta su un livello sottostante). Per gli utenti mobile con connessioni lente, è meglio non caricare affatto lo sfondo video. Usa la media query prefers-reduced-data e sostituisci con un’immagine statica.

Come rendo leggibile il testo sopra il video?

Aggiungi un overlay semitrasparente tra il video e il contenuto: background: rgba(0, 0, 0, 0.4) su uno pseudo-elemento ::after del contenitore con position: absolute; inset: 0; z-index: 1. Il contenuto stesso riceve z-index: 2; position: relative. Scegli il coefficiente di scurimento in base al video specifico: riprese più chiare ne richiedono di più, riprese più scure di meno.

Funziona su iOS e Android?

Sì, con dei limiti. iOS richiede playsinline (altrimenti il video va in un player a schermo intero). Su versioni di iOS Safari precedenti alla 10, object-fit non è supportato, quindi entrerà in funzione il fallback del codice di produzione qui sopra. Android Chrome funziona correttamente. Su entrambe le piattaforme, il video parte solo dopo la prima interazione dell’utente se muted non è impostato, quindi muted è strettamente obbligatorio.

Cosa usare nel tuo progetto: il verdetto in breve

Se stai costruendo un sito web nel 2026, usa object-fit: cover. Tre righe di CSS, niente JavaScript, piena responsività già pronta. Il supporto dei browser è quasi universale e la copertura cresce ogni mese.

Se hai un progetto legacy con supporto obbligatorio per vecchie versioni di Edge (prima della 79) o Firefox (prima della 36), il codice di produzione della sezione precedente ti dà entrambi i mondi: @supports abilita la soluzione moderna, mentre le media query coprono il resto.

E ricorda: uno sfondo video è la ciliegina sulla torta. Se la clip pesa 20 megabyte e impiega otto secondi a caricarsi, l’utente se ne andrà prima di vedere il tuo bel titolo. Comprimi, testa a velocità mobile e fornisci sempre un fallback statico.

Alla salute di un ottimo sfondo.