Cell. +39 3479684755

Il Blog di Instant Websites

Tag: video adattivo

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).

YouTubePrevedendo 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.

Continua a leggere

Categorie
Archivi