Fluid Video: adattare un video alle dimensioni del viewport in un layout responsive

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 elementi non si comportano in maniera corretta ed uno di questi è il vecchio e caro tag <iframe>.

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 i CSS, che si adatti perfettamente alla dimensione del device, o quando viene ridimensionata la finestra del browser.

Poniamo il caso che si vuole richiamare nella pagina, 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:

<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 dimensione di 480px, il risultato sarebbe il seguente:

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

Si badi bene che la parte grigia vorrebbe essere il viewport dello smartphone. Nel codice rilasciato da YouTube è indicato:

width="560" height="315"

vuol dire 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 alla dimensione del device.

Responsive Video

Il codice HTML:

<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:

Formattare l'elemento <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%;
}

Dopo aver scritto questo codice CSS, il video si adatterà alla larghezza dello schermo. La demo di esempio, mostra un filmato preso da YouTube.