Cell. +39 3479684755
Il Blog di Instant Websites
Box reattivo per la pubblicazione di un video tramite iframe
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.