Un embed YouTube con larghezza e altezza fisse appare corretto sullo schermo su cui è stato creato, e inadeguato su ogni altro. Ecco come renderlo davvero responsive.
La tecnica del padding-bottom
La soluzione classica inserisce l’iframe in un contenitore con un padding-bottom basato su percentuale invece di un’altezza fissa:
<div style="position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;">n <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>n</div>Il valore 56,25% deriva da 9 diviso 16, il rapporto standard dei video. Per i video verticali in stile Shorts, usa invece 177,78% (16 diviso 9).
Un’alternativa più moderna
Il CSS attuale supporta anche la proprietà aspect-ratio direttamente, più breve sui browser compatibili:
<div style="width:100%;aspect-ratio:16/9;">n <iframe src="..." style="width:100%;height:100%;border:0;" allowfullscreen></iframe>n</div>Testalo tu stesso
Restringi e allarga la finestra del browser mentre l’embed è visibile, e verifica che il player si adatti senza barre nere o distorsioni.
Senza CSS manuale
Il nostro generatore di codice di incorporamento crea automaticamente un contenitore responsive correttamente proporzionato, inclusa la versione 9:16 per gli Shorts.