Tempo di lettura: < 1 minuto
A quanti di voi è mai capitato di avere la necessità di integrare nel proprio sito web un video di YouTube?
L’operazione è semplicissima e basta incorporare il codice che ci viene fornito da YouTube, infatti nella versione “desktop” era tutto a posto, ma siccome il sito è responsive, nel momento del ridimensionamento faceva un piccolo scherzetto.
Siccome ho la necessità che il video sia anch’esso responsive, ho trovato un piccolo trick, semplice e funzionale.
Se volete rendere il vostro video Youtube responsive inserite questo codice nel vostro foglio di stile.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
poi inserite il vostro codice html del video che potete reperire direttamente da YouTube.
Un esempio è:
<iframe src="https://www.youtube.com/embed/vZK5mzj62Pk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Ora il vostro video sarà responsive.
