Video responsive con i CSS

  • CSS
  • Gabriele Romanato

Rendere un video “responsive” significa farlo adattare al contenitore e alle varie dimensioni di schermo senza distorsioni, senza overflow orizzontali e mantenendo (quando serve) il rapporto d’aspetto. Il caso più comune è un video incorporato da piattaforme esterne (per esempio tramite <iframe>), ma gli stessi principi valgono anche per video serviti come file con il tag <video>.

In questo articolo vedrai un approccio moderno basato su aspect-ratio, un fallback robusto per browser meno aggiornati e alcune pratiche utili per prestazioni e accessibilità.

Il problema: larghezza fluida e altezza coerente

Impostare solo width: 100% su un <iframe> spesso non basta: l’altezza rimane fissa e il video si “schiaccia” o crea spazi vuoti. Serve quindi un modo per far variare l’altezza in base alla larghezza mantenendo un rapporto (per esempio 16:9).

Obiettivo pratico: il video deve occupare tutta la larghezza disponibile, mantenere il rapporto d’aspetto e non uscire mai dal layout.

Soluzione moderna con aspect-ratio

Oggi la via più pulita consiste nell’assegnare il rapporto d’aspetto al contenitore e far “riempire” al video lo spazio risultante. Per evitare div e tag strutturali vietati, usiamo un <figure> con una classe dedicata.

HTML (embed con iframe)

<h2>Esempio: video incorporato</h2>

<figure class="video-responsive ratio-16x9">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Titolo del video"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
  <figcaption>Embed responsive 16:9 con <code>aspect-ratio</code>.</figcaption>
</figure>

CSS

figure.video-responsive {
  margin: 1.25rem auto;
}

figure.video-responsive > iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 12px;
}

figure.ratio-16x9 { aspect-ratio: 16 / 9; }
figure.ratio-21x9 { aspect-ratio: 21 / 9; }
figure.ratio-1x1  { aspect-ratio: 1 / 1; }

La combinazione “contenitore con aspect-ratio + iframe al 100% in altezza e larghezza” è semplice e funziona bene. Per cambiare formato basta cambiare classe (per esempio ratio-21x9).

Fallback: tecnica del padding per il rapporto d’aspetto

Se devi supportare contesti in cui aspect-ratio non è disponibile, puoi usare il classico “padding-top hack”. L’idea è: un contenitore con height: 0 e un padding-top calcolato in percentuale, dove la percentuale rappresenta il rapporto d’aspetto (per 16:9 è 9/16 = 56.25%).

HTML

<h2>Esempio: fallback con padding</h2>

<figure class="pad-ratio">
  <iframe
    src="https://player.vimeo.com/video/VIDEO_ID"
    title="Titolo del video"
    loading="lazy"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen>
  </iframe>
</figure>

CSS

figure.pad-ratio {
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

figure.pad-ratio::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

figure.pad-ratio > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Per cambiare rapporto d’aspetto modifica il valore di padding-top. Alcuni valori utili:

  • 16:9 → 56.25%
  • 4:3 → 75%
  • 1:1 → 100%
  • 21:9 → 42.857% (circa)

Video come file: tag <video> responsive

Se servi un file video direttamente, il browser conosce (quasi sempre) le dimensioni e il rapporto d’aspetto, quindi spesso basta impostare width: 100% e lasciare height: auto.

HTML

<h2>Esempio: video locale</h2>

<video class="video-el" controls preload="metadata">
  <source src="media/demo.mp4" type="video/mp4" />
  <source src="media/demo.webm" type="video/webm" />
  Il tuo browser non supporta il tag video.
</video>

CSS

video.video-el {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
}

Quando serve “ritagliare”: object-fit

In alcune UI (hero video, card, teaser) potresti voler forzare un box con dimensioni precise e far “coprire” il video, accettando un ritaglio. In quel caso imposta il contenitore con un rapporto d’aspetto e applica object-fit: cover al video.

HTML

<h2>Esempio: video in cover</h2>

<figure class="video-responsive ratio-16x9">
  <video class="video-el video-cover" autoplay muted loop playsinline preload="metadata">
    <source src="media/hero.mp4" type="video/mp4" />
  </video>
  <figcaption>Il video riempie il box e può essere ritagliato.</figcaption>
</figure>

CSS

figure.ratio-16x9 { aspect-ratio: 16 / 9; }

video.video-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Nota: con autoplay quasi tutti i browser richiedono muted. playsinline è consigliato su mobile per evitare che il video entri automaticamente a schermo intero.

Consigli pratici: performance, accessibilità e layout

Caricamento pigro degli embed

Per gli <iframe>, usa loading="lazy" quando il video non è subito visibile sopra la piega (above the fold). Riduce il lavoro iniziale e migliora i tempi di caricamento percepiti.

Evitare layout shift

Definire il rapporto d’aspetto prima che il contenuto venga caricato evita salti di layout. Con aspect-ratio o col fallback a padding stai già riservando lo spazio corretto: il layout rimane stabile.

Contenitori stretti e testi lunghi

Se il video vive in una colonna stretta, il comportamento è identico: width: 100% lo vincola al contenitore. Se invece hai una pagina molto larga, valuta un max-width per il contenuto (come in questo esempio) per mantenere una lettura confortevole.

Preferenze utente e autoplay

Evita autoplay con audio. Se usi autoplay per motivi estetici, mantieni il video muto e considera di offrire un controllo esplicito. In presenza di prefers-reduced-motion, valuta di disabilitare autoplay lato JavaScript o mostrare un poster statico.

Ricette rapide

  1. Embed 16:9 moderno: <figure class="video-responsive ratio-16x9"> + aspect-ratio e iframe a height: 100%.
  2. Compatibilità ampia: usa figure.pad-ratio con pseudo-elemento e padding-top.
  3. Video file responsive: video { width: 100%; height: auto; }.
  4. Video “cover”: contenitore con rapporto d’aspetto + object-fit: cover.

Conclusione

Un video responsive in CSS si riduce a due idee: larghezza fluida e altezza derivata dal rapporto d’aspetto. Con aspect-ratio ottieni una soluzione pulita e leggibile; con la tecnica del padding copri anche ambienti più datati. Per i video serviti come file, spesso basta width: 100%, mentre object-fit ti permette layout più “grafici” quando vuoi riempire un box.

Se adotti queste ricette, i tuoi video si integreranno nel layout senza sorprese, su mobile come su desktop, con un buon equilibrio tra resa, performance e accessibilità.

Torna su