Inserire video a larghezza fluida con FitVid.js

Spesso capita di dove inserire nelle nostre pagine web, dei video tratti ad esempio da youtube.Vogliamo inoltre che la loro dimensione sia sempre la massima disponibile.

Ecco quindi venirci incontro questo plugin (FitVid.js), risolvendo tale problematica.

Vediamo il suo utilizzo: Creiamo la nostra pagina html ed all’interno del tag body creiamo un div con classe container nel quale inseriremo un video youtube:

Fatto ciò poco, prima della chiusura del tag body, andiamo ad includere le librerie necessarie ed a inizializzare fitvid.js:

  • jquery
  • fitvid.js

Codice:


<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.fitvids.js"></script>

Dobbiamo quindi inizializzare il plugin fitvid.js affinchè entri in azione ridimensionando i video automaticamente.

Per far questo, l’istruzione necessaria è:


 $("#thing-with-videos").fitVids();

Con jQuery dobbiamo selezionare il div contenitore dei nostri video, che nel nostro caso è container. FitVid.js supporta automaticamente i seguenti video provider:

  • YouTube;
  • Vimeo;
  • Blip.tv;
  • Viddler;
  • Kickstarter.

Nel caso in cui, dovessimo includere un video di un provider non presente in questa lista, fitvid ci da la possibilità di farlo usando nel metodo fitVids() un parametro così strutturato:


$("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://myvideoprovider.com']"}); 

Basta quindi inserire al posto di http://myvideoprovider.com, il link del provider che contiene il video da includere.  

Di seguito un video che illustra il funzionamento del plugin:

[ylwm_vimeo]28523422[/ylwm_vimeo]
A questo indirizzo è possible visualizzare un esempio funzionante:

[like_to_read]Esempio.[/like_to_read]

 

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.