Un embed YouTube con larghezza e altezza fisse sembra perfetto sullo schermo su cui è stato costruito e si rompe su qualsiasi altro schermo. Ecco come farlo scalare correttamente.
Il problema delle dimensioni fisse
Il codice embed predefinito di YouTube imposta una larghezza e un’altezza in pixel letterali, ad esempio 560 per 315. Su un grande monitor desktop può sembrare piccolo; su uno schermo di telefono stretto può straripare completamente dalla pagina, costringendo il visitatore a scorrere lateralmente. Nessuna delle due è una buona esperienza.
La tecnica del padding-bottom
La soluzione standard racchiude l’iframe in un contenitore dimensionato usando un padding-bottom in percentuale invece di un’altezza fissa, e posiziona l’iframe in modo assoluto per riempire quel contenitore:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>Il 56,25% deriva dalla divisione di 9 per 16, il rapporto d’aspetto standard dei video. Poiché la larghezza del contenitore è impostata al 100% del suo elemento genitore, e la sua altezza viene calcolata come percentuale di quella larghezza, il riquadro mantiene una forma 16:9 perfetta indipendentemente dalla larghezza della pagina circostante.
La versione per gli Shorts
I video verticali, come gli YouTube Shorts, usano il rapporto opposto. Basta cambiare il padding-bottom a 177,78% (16 diviso 9) e la stessa tecnica mantiene invece una forma 9:16 corretta.
Un’alternativa moderna più semplice
Il CSS attuale supporta direttamente la proprietà aspect-ratio, che può sostituire il trucco del padding-bottom sui browser che la supportano:
<div style="width:100%;aspect-ratio:16/9;">
<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" style="width:100%;height:100%;border:0;" allowfullscreen></iframe>
</div>È più breve e più facile da leggere, anche se il metodo del padding-bottom resta l’opzione predefinita più sicura se devi supportare browser più datati.
Testarlo correttamente
Ridimensiona la finestra del browser rendendola più stretta e più larga mentre l’embed è a schermo (oppure usa la modalità dispositivo del browser per simulare un telefono) e verifica che il player scali in modo fluido, senza bande nere, senza straripamento e senza deformazioni. È esattamente il tipo di controllo che vale la pena fare prima di pubblicare qualsiasi pagina con un video incorporato.
Salta il CSS manuale
Il nostro generatore di codice embed produce automaticamente un contenitore responsive correttamente proporzionato, inclusa la versione 9:16 per gli Shorts, così non devi ricordare a memoria queste percentuali.