Esistono diversi metodi per pubblicare video in una pagina HTML, il migliore dei quali in termini di compatibilità è quello che fa uso del tag <video> della nuova versione di HTML, vale a dire HTML5 (ne abbiamo parlato in un precedente articolo).

Prevedendo diversi formati del file, compreso quello di fallback per i browser che non supportano HTML5 (.flv cioè Flash Video), è possibile rendere il video fruibile su tutti i dispositivi, recenti e meno recenti.

Ci sono però altre considerazioni che spingono a preferire una soluzione differente: pubblicare il filmato su YouTube, quindi incorporarlo nella pagina del sito.

Queste motivazioni sono riconducibili innanzitutto a quanto segue:

• rendere il video visibile anche sul sito YouTube stesso, quindi ad una platea potenzialmente molto più ampia;
• evitare di dovere convertire il file in più formati (.mp4, .ogv, .webm, .m4v, .flv);
• aggirare le limitazioni imposte da alcuni fornitori di hosting sullo spazio massimo occupabile in totale e/o relativo ad un singolo file, dato che i file video sono spesso di grosse dimensioni.

Presupponendo dunque di avere optato per questa strada, YouTube fornisce il codice per incorporare il video nella pagina, ad esempio:

<iframe width=”853″ height=”480″ src=”//www.youtube.com/embed/6U-J8Nn9JfQ”></iframe>

Notiamo per prima cosa che il filmato ha proporzioni pari a 16:9 quasi esatte, il che si traduce in un rapporto base/altezza pari a:

9/16 = 0,5625 => 56,25%

mentre nel caso di un filmato con proporzioni 4:3 il calcolo diverrebbe:

3/4 = 0,75 => 75,00%

Questa premessa è necessaria perché, come vedremo di seguito, la soluzione dell’iframe comporta delle complicazioni nel rendere adattivo il filmato.

Queste complicazioni non si presentano se si utilizza il succitato tag <video> di HTML5 poiché sarebbe sufficiente inserire una regola analoga a quella usata per le immagini:

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

Vediamo dunque un esempio in forma semplificata (nel senso di usare una struttura di pagina senza altri contenuti) inserendo nel codice HTML della pagina quanto segue:

<div id=”box”>
<iframe width=”853″ height=”480″ src=”//www.youtube.com/embed/6U-J8Nn9JfQ”></iframe>
</div>

e

<div id=”box2″>
<iframe width=”853″ height=”480″ src=”//www.youtube.com/embed/6U-J8Nn9JfQ”></iframe>
</div>

Il video è cioè lo stesso ma nel caso del div#box tenteremo una soluzione “classica” e non funzionante per renderlo reattivo mentre, nel caso del div#box2, applicheremo un hack che permetterà di raggiungere un risultato ottimale.

Nel foglio di stile inseriremo dunque innanzitutto:

#box {
width: 853px;
}

@media (max-width: 960px) {

#box, #box iframe {
width: 100%;
height: auto;
}

}

(si noti che le Media Query sono limitate per semplicità all’ipotesi di una viewport inferiore a 960px di larghezza).

Guardando la pagina contenente l’esempio, si nota subito come il video non mantenga le proporzioni corrette quando la viewport viene ridotta.

E’ stato messo a punto un metodo che utilizza il padding  inferiore del contenitore del video, pari al 56,25% nel caso di filmato con proporzioni di 16:9, ed il posizionamento assoluto dell’iframe al suo interno.

Facendo riferimento al secondo box nella pagina con l’esempio, avremo perciò:

@media (max-width: 960px) {

#box2 {
width: 100%;
position: relative; /* rende il div elemento progenitore per l’iframe al suo interno */
padding-bottom: 56.25%;
height: 0;
}
#box2 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

}

come si può vedere, il box si ridimensiona correttamente mostrando l’iframe, quindi il filmato, con le giuste proporzioni.

Bibliografia: “Implementing Responsive Design”, Tim Kadlec, New Riders ed., pagg. 118-119