Video flessibili

Come gestire i video in un sito responsive


Il nostro prossimo progetto responsive potrebbe prevedere dei video: HTML5 o embedded che siano, vediamo come renderli “elastici”.


Video HTML5

Eccetto IE 8 e Opera Mini tutti i browser più diffusi supportano i video HTML5, e renderli flessibili è un gioco da ragazzi:

video {
width:100%;
height:auto;
}

Così facendo i video riempiranno i loro contenitori per l’intera larghezza. Tuttavia, video di dimensioni ridotti in contenitori molto più grandi potrebbero risultare sgranati.

Ecco perché alla dichiarazione precedente potresti preferire questa:

video {
max-width:100%;
height:auto;
}

Grazie alla proprietà max-width il video riempirà ancora il proprio contenitore senza però superare le sue dimensioni “fisiche”. Ad esempio, un video largo 600px scalerà fino a riempire perfettamente un contenitore largo 400px, ma non sgranerà in un contenitore largo 800px, fermandosi a 600px.


iframe

Se invece vogliamo incorporare un video da YouTube, Vimeo, Instagram o Vine avremo a che fare con gli iframe e con essi un problema di proporzioni.

Per dirla tutta il problema non si limita ai soli video, ma si estende a tutti i contenuti di terze parti, come le presentazioni di SlideShare, le Google Maps o le Bing Maps.

Per incorporare un video, una presentazione o una mappa senza alterarne le proporzioni dobbiamo ricorrere a un piccolo hack. Prendiamo ad esempio il video all’indirizzo vimeo.com/20732587 (il preferito dalla mia gattina), il codice di incorporamento è:

<iframe src="//player.vimeo.com/video/20732587?color=969696" width="580" height="326" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Con width:100% o max-width:100% associati all’iframe, il video verrà deformato in altezza, height:auto o meno. Come fare dunque? Il trucco è molto semplice.

Includiamo l’iframe in un div contenitore:

<div class="embed-container">
<iframe src="//player.vimeo.com/video/20732587?color=969696" width="580" height="326" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Diamo al div un padding-bottom di 56.25% nel caso di un video a 16:9 (9:16=0.5625) e 75% nel caso di un video a 4:3 (3:4=0.75) e posizioniamo l’iframe in absolute con width e height a 100%, così da forzare il video a ridimensionarsi:

.embed-container {
position:relative;
padding-top:30px; /* IE6 fix */
padding-bottom:56.25%; /* 16:9 */
height:0;
overflow:hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Per i più pigri segnalo embedresponsively.com, tool di Jeff Hobbs che automatizza la soluzione appena descritta per l’incorporamento di media provenienti (tra gli altri) da YouTube, Vimeo, Dailymotion, Google Maps, Instagram e Vine.


Facile, no?

In alternativa possiamo sfruttare FitVids, un plugin jQuery di soli 2KB realizzato da Chris Coyier e Paravel in grado di automatizzare il processo.

Grazie a FitVids non avremo infatti la necessità di specificare un div con un padding-bottom dipendente dalla proporzione del video contenuto. Basterà includere jQuery 1.7+ e FitVids.js nella pagina e selezionare il contenitore del/i video (può essere anche il wrapper dell’intero layout):

<script src="jquery.js"></script>
<script src="jquery.fitvids.js"></script>
<script>
jQuery(function(){
$("#wrapper").fitVids();
});
</script>

FitVids supporta i player di YouTube, Vimeo, Blip.tv, Viddler e Kickstarter.


Infine, per i puristi del JavaScript c’è FluidVids di Todd Motto, che diversamente da FitVids non necessita di jQuery e pesa solo 1KB. Basta includere il js nella pagina e voilà, i nostri video incorporati da YouTube e Vimeo diventeranno magicamente flessibili:

<script src="fluidvids.js"></script>
<script>
fluidvids.init({
selector: 'iframe',
players: ['www.youtube.com', 'player.vimeo.com']
});
</script>