Qualche settimana fa parlai di una soluzione abbastanza complessa per adattare le immagini alla risoluzione del client. Prima ancora, spesi qualche parola sulle media query, una delle potenzialità offerte dai CSS terza versione. Nonostante tutto, queste due accortezze, da sole non basteranno se volessimo importare nelle nostre pagine un video.
In HTML5 potremmo sfruttare le potenzialità dell'elemento video e con l'aiuto dei CSS completeremmo l'opera in pochi secondi, semplicemente scrivendo video { max-width: 100%; height: auto; }.
Purtroppo però, se volessimo importare dei video da YouTube o da servizi simili questa soluzione non funzionerebbe (colpa di Flash). L'ampiezza si adatterebbe alla pagina, ma l'altezza resterebbe sempre la stessa rovinando le proporzioni del video.
FitVids.js, è un plugin per jQuery, leggero e semplicissimo da usare. Si importa la libreria jQuery, si importa il plugin, dopodiché, l'ultima cosa che resta da fare è informare, sfruttando la classica sintassi jQuery, il plugin su quale sia l'elemento contenente i video $("#contenitore-video").fitVids(); ed anche questa è fatta.