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:
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:relativeil div esterno, ci permette di utilizzare il posizionamento assoluto per l'iframe. - Il valore del
padding-bottomviene 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-bottomdà 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:hiddencosì 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à
topeleftservono per posizionare l'iframe correttamente nell'elemento contenitore. - Le proprietà di
widtheheightassicurano che il video occupi il 100% dello spazio utilizzato dall'elemento contenitore.
Con questo codice CSS siamo sicuri che il video si adatterà alla larghezza dello schermo. La pagina di esempio con il video responsive preso da youtube.
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 Vimeo. 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:
- Link
- Send email
- 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 video responsive di Vimeo, nella quale è stato inserito un video free.