Responsive Fluid Video
Responsive Fluid Video
Extrowebsite

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.

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:

  • Impostare su position:relative il div esterno, ci permette di utilizzare il posizionamento assoluto per l'iframe.
  • Il valore del padding-bottom viene calcolato in base al rapporto di aspect ratio del video. In questo caso, l'aspect ratio è 16:9, il che significa che l'altezza sarà 56,25% della larghezza. Per un video con un aspect ratio di 4:3, il padding-bottom verrà dichiarato al 75%.
  • Il valore padding-top è impostato a 30 pixel per consentire lo spazio per il chrome - specifico per i video di YouTube.
  • L'altezza è impostata a 0, perché il padding-bottom da' all'elemento l'altezza di cui necessita. Non serve impostare la larghezza perché si ridimensiona automaticamente con l'elemento responsive che contiene il div.
  • overflow:hidden così siamo sicuri che qualsiasi contenuto che possa fuorisuscire dal div, verrà nascosto.

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%;
}
  • Viene impostato il posizionamento assoluto perché l'elemento contenitore ha un'altezza pari a 0. Se l'iframe fosse posizionato normalmente, avremmo assegnato anche ad esso un'altezza uguale a 0.
  • Le proprietà top e left servono per posizionare l'iframe correttamente nell'elemento contenitore.
  • Le proprietà di width e height assicurano che il video occupi il 100% dello spazio utilizzato dall'elemento contenitore.

Con questo questo codice CSS siamo sicuri che il video si adatterà alla larghezza dello schermo. Il mostra un filmato il cui URL è stato preso da YouTube.