Cos’è il design responsive?

Il design responsive significa che il layout di una pagina web si adatta allo schermo su cui viene visualizzata, da un piccolo telefono a un grande monitor desktop, invece di mantenere una dimensione fissa. Applicato al video, significa che il player si ridimensiona insieme al proprio contenitore invece di essere sempre renderizzato con una larghezza e un’altezza fisse in pixel.

La tecnica del padding-bottom

Il modo più comune per rendere responsive un’incorporazione è avvolgere l’iframe in un contenitore con un padding-bottom basato su percentuale (56,25% per video 16:9), e posizionare l’iframe al suo interno in modo assoluto al 100% di larghezza e altezza. Questo mantiene corretto il rapporto d’aspetto a qualsiasi larghezza del contenitore.

Un’alternativa più recente

Il CSS moderno supporta anche direttamente la proprietà aspect-ratio, che ottiene un risultato simile con meno markup nei browser che la supportano. Vedi la guida completa alle incorporazioni responsive per esempi funzionanti di entrambi gli approcci.

Le due tecniche principali per il video responsive

Il dimensionamento responsive del video si ottiene generalmente in due modi. La tecnica più datata, più ampiamente compatibile, avvolge l’iframe in un contenitore usando un padding-bottom basato su percentuale (56,25% per video 16:9) combinato con posizionamento assoluto, un trucco che funziona in modo affidabile da quando il design responsive è diventato comune oltre un decennio fa. La tecnica più recente usa direttamente la proprietà CSS aspect-ratio sul contenitore, più breve da scrivere e più facile da leggere, a costo di dipendere da una funzionalità CSS non supportata da alcuni browser considerevolmente più vecchi.

Un esempio pratico che confronta entrambe le tecniche

<!-- Tecnica padding-bottom -->
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="..." style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>

<!-- Tecnica aspect-ratio -->
<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
</div>

Entrambe producono lo stesso risultato visivo sui browser moderni; la scelta dipende soprattutto da quanto supporto per browser meno recenti richiede il tuo pubblico.

Design responsive contro incorporamento a dimensione fissa

Un’incorporazione a dimensione fissa, con attributi width e height letterali, è più semplice da scrivere ma si rompe nel momento in cui la pagina circostante viene visualizzata su uno schermo più stretto di quella larghezza fissa, sia facendo traboccare il layout sia richiedendo lo scorrimento orizzontale. Il design responsive scambia una piccola complessità aggiuntiva in fase di configurazione con un’incorporazione che funziona correttamente su tutta la gamma di dimensioni di schermo effettivamente usate dai visitatori, motivo per cui è l’impostazione predefinita consigliata per praticamente tutti i siti web moderni.

Testare su una vera gamma di larghezze dei dispositivi, non limitandosi a ridimensionare leggermente una finestra del browser desktop, resta il modo più affidabile per confermare che un’incorporazione responsive si comporti davvero correttamente per l’intera gamma di visitatori che riceve un tipico sito web, dai piccoli telefoni ai grandi monitor esterni.

Domande frequenti