blog IT | giorgiorusso.com

Blog di Information Technology di Giorgio Russo

Come rendere responsive un Video

Ti sarai chiesto come è possibile riuscire a rendere responsive un video in formato 16:9 e permetterne la visibilità ottimale sia sul web che naturalmente sul mobile, rispettandone le proporzioni.  Non è difficile se segui lo script qui sotto.

Di fatto è necessario includere l’iframe in un DIV che aggiunge uno stile che definisce che il contenuto all’interno debba avere un’altezza che si autoproporziona al formato richiesto (in questo caso 16:9) ed il gioco è fatto.

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
     <iframe style="width:100%; height:100%; position:absolute; 
               left:0px; top:0px; overflow:hidden" 
          frameborder="0" type="text/html" 
          src="https://www.youtube.com/embed/PRfIUPQju4w" 
          width="100%" height="100%" allowfullscreen allow="autoplay"> 
     </iframe> 
</div>

Ciao