Responsive fluid video

Responsive Fluid Video
Responsive Fluid Video

Nella moltitudine di layout e siti web responsive, uno degli elementi che dovrebbe essere in perfetta armonia con i contenuti delle pagine web, è l'elemento video. Purtroppo, molti tag html non si comportano in maniera corretta ed uno di questi è il tag <iframe>. Nel presente articolo vedremo come adattare un video a diversi tipi di media, per renderlo completamente fluido e responsive.

Ci sono diversi modi in cui un video può essere visualizzato nel proprio sito. Richiamare il filmato dal proprio server ed includerlo con l'elemento HTML5 <video>. Si potrebbe usare il codice di YouTube, o Vimeo, i quali rilasciano il codice per incorporare il video nell'elemento <iframe>. In entrambi questi casi, una costante sono le dimensioni fisse per l'altezza e la larghezza [width e height]. In questo articolo vedremo come rendere un video responsive, utilizzando solo i CSS, che si adatti perfettamente alla dimensione del device o quando viene ridimensionata la finestra del browser.

Per esempio, si vuol richiamare, in una pagina web, un video da YouTube e che la stessa pagina sia stata progettata per un sito responsive. Quello che dovremmo fare è copiare / incollare semplicemente il codice HTML da Youtube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/s_EYHsW0c9U" frameborder="0"></iframe>

Se la pagina in oggetto fosse visualizzata in uno smartphone, con orientamento orizzontale (landscape) e con viewport con dimensione di 480px, il risultato sarebbe il seguente:

Video con dimensioni fisse, visualizzato in uno smartphone
Video con dimensioni fisse, visualizzato in uno smartphone

Da notare che la parte grigia dovrebbe essere il viewport del device. Nel codice rilasciato da YouTube è indicato:

width="560" height="315"

L'immagine sta ad indicare che qualcosa non è andato per il verso giusto. O meglio, entrambe le cose sono corrette: codice e visualizzazione, anche se non proprio all'altezza delle aspettative. Purtroppo non possiamo rimuovere le dimensioni dall'</iframe>, altrimenti il video scomparirebbe nè, tantomeno, possiamo intervenire tramite i CSS.

L'attributo width significa che, su uno schermo più stretto di 560 pixel, il contenuto incorporato sporge al di fuori del suo elemento contenitore, rompendo il layout. Ed è quello che ho riportato nell'immagine precedente. Per fortuna è possibile risolvere il tutto con i Fogli di Stile, affinchè qualunque sia la dimensione del video, lo stesso deve adattarsi alle dimensioni del device.

Il markup per il video responsive

<div class="video">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/s_EYHsW0c9U" frameborder="0"></iframe>
</div>

Per rendere i contenuti incorporati, responsive, è necessario aggiungere un <div> che racchiuda l'iframe. Come appena scritto nel codice qui sopra. Il passaggio successivo è quello di formattare, con i CSS, sia il <div> esterno che l'iframe.

.video{
position: relative;
padding-top:30px;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}

Cosa vuol dire questo codice:

Il codice per il tag <iframe>

Anche per l'<iframe> serve qualche rigo di codice CSS. Vediamo come fare:

.video iframe{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
}

Con questo codice CSS siamo sicuri che il video si adatterà alla larghezza dello schermo. La pagina di esempio con il .

Allo stesso modo è possibile inserire nelle pagine web anche video da Vimeo. Il procedimento è uguale a quello fatto per YouTube.

Vimeo, alla stessa stregua di YouTube, consente di copiare la porzione di codice HTML per il tag Iframe. Vediamo come fare.

Portarsi nella pagina di . Si prenda come esempio qualsiasi video. Da notare, sulla destra dello stesso video, l'icona share (a forma di aereoplanino, per intenderci).

Cliccare con il pulsante sinistro del mouse ed appare una pop-up Share this video.

Nella suddetta pop-up sono presenti 3 campi:

  1. Link
  2. Send email
  3. Embed

A noi interessa il terzo: Embed.

Copiarlo ed incollarlo nella nostra pagina web, nel punto in cui vogliamo che il video appaia. Esempio:

<iframe src="https://player.vimeo.com/video/259411563" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Questo codice, una volta salvata la pagina HTML, consente di visualizzare il video che si desidera.

Anche in questo caso ho preparato una pagina di esempio, con un , nella quale è stato inserito un video free.