giorgiorusso.com

giorgiorusso.com 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 src="https://player.vimeo.com/video/837383841?h=cec59e3e9b&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
                 frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
                 allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="la ragazza nuda ‑ Book Trailer"></iframe>
</div>

Se inserisci poi all’interno il book trailer del mio primo romanzo, l’effetto viene anche molto meglio!

 

Show More