Come rendere fluida la larghezza dei video per visualizzarli anche da mobile nei siti Responsive.

Come rendere Responsive i player dei video di Youtube e di Vimeo per visualizzare i video con le giuste dimensioni anche da dispositivi mobili quali tablet e cellulari.

A seguito di una conversazione avuta via email e dopo una ricerca su internet sono riuscito a trovare il bandolo della matassa per pubblicare video di Youtube e Vimeo con il player visibile nelle dimensioni appropriate da tutti i dispositivi. Come certo saprete ora vanno molto di moda i template e i temi Responsive che adattano la loro grafica automaticamente alla risoluzione del dispositivo con i quali sono visualizzati.

La difficoltà per i video è che in qualunque modo si posti il loro codice dovremo sempre inserire il valore della larghezza (width). Un valore di 560 pixel per la larghezza del player è ottimale se il video viene visualizzato tramite computer ma se si apre con un cellulare il risultato potrebbe essere pessimo. 

Come probabilmente saprete ci sono tre modi per inserire il codice di un video di Youtube

<video width="400" height="300" ... con HTML5
<iframe width="400" height="300" ... con iFrame
<object width="400" height="300" ...
<embed width="400" height="300" ... con il vecchio codice

con i valori delle dimensioni che possono variare a piacere. I video si pubblicano con il nuovo tag <video> di HTML5, con il classico iframe e con il vecchio codice che veniva usato fino a qualche anno fa e che è ancora disponibile andando su Condividi. In ogni caso deve essere sempre dichiarata la larghezza e questo crea dei problemi di visualizzazione con dispositivi mobili con una dimensione inferiore. 

La soluzione a questo problema fu trovata da da Thierry Koblentz e presentata in un post di A List Apart del 2009. Il concetto è quello di calcolare il rapporto tra le due dimensioni in forma percentuale. In caso di player a 16:9 abbiamo (9:16)*100=56.25 mentre per un player a 4:3 la percentuale è (3:4)*100=75. In un blog su Blogger dovremo quindi andare su Modello > Modifica HTML e cliccare sulla freccetta nera a sinistra intorno alla 13-esima riga per visualizzare la sezione <b:skin>. Con Ctrl+F si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice 

/* Responsive Video 16:9 */
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

studiato appositamente per i video 16:9. Se oltre ai video con questo rapporto siamo soliti postare anche video con player 4:3  si può incollare un secondo codice come questo 

/* Responsive Video 4:3 */
.videoWrapper1 {
    position: relative;
    padding-bottom: 75%; /* 4:3 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper1 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

per creare altre due CSS con un'altra percentuale di rapporto tra le dimensioni. Si salva il modello. Quando si vuole postare un video con player 16:9 si utilizza la classe videoWrapper in questo modo

<div class="videoWrapper">
<!-- Codice copiato e incollato da Youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/pX2GyHPPyI8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Dopo la pubblicazione si può provare a testare con uno strumento tipo Screenfly

Per postare video con Player da 4:3 al posto di videoWrapper sostituiremo videoWrapper1. Questa personalizzazione è ovviamente da utilizzare solo qualora si abbia un modello Responsive. Per i video di Vimeo si usa lo stesso sistema incollando il codice al posto di quello di Youtube. 

Il funzionamento del codice dipende da alcuni tag che forse è opportuno specificare:

1. Il posizionamento dell'iframe non avviene in modo assoluto ma con position:relative
2. Il tag padding-bottom determina la distanza dal basso in percentuale. Per i video 16:9 sarà del 56.25% rispetto alla larghezza
3. Il padding-top di 30 pixel è fisso e tipico per tutti i video di Youtube
4. height: 0; perché l'altezza è già impostata dal padding-bottom
5. overflow:hidden per nascondere tutto quello che esce dal player.