Il Blog di INSTANT WEBSITES

FitVids.js: plugin jQuery per l’inserimento di video reattivi

L’inserimento di video da YouTube o altre piattaforme sociali tramite iframe in una pagina reattiva o comunque fluida, comporta alcune difficoltà particolari, legate all’esigenza di mantenere il corretto rapporto proporzionale tra base ed altezza del video (e del relativo contenitore).

L’argomento è stato già trattato e, in un recente articolo, è stato indicato un fix, peraltro non immediato, per risolvere il problema.

Esiste tuttavia un plugin sviluppato per il framework jQuery, chiamato FitVids.js, che serve proprio allo scopo.

Esempio 1: utilizzo in una pagina fluida

Vediamo come utilizzarlo in una pagina fluida con dimensioni 100%, dove abbiamo impostato solo un padding a body.

Associamo la libreria di base del framework ed il plugin, preventivamente scaricato ed inserito in un’apposita cartella del nostro sito:


<head>

<script src=”https://code.jquery.com/jquery.js”></script>
<script src=”js/jquery.fitvids.js”></script>
<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$(“#videoBox”).fitVids();
});
</script>


</head>

là dove #videoBox è il box che conterrà il video.

Nel foglio di stile, le regole relative saranno:

#videoBox {
max-width: 100%;
height: auto;
}
iframe,
embed,
object {
max-width: 100%;
}

mentre nel codice HTML:


<div id=”videoBox”>
<iframe width=”853″ height=”480″ src=”http://www.youtube.com/embed/kaIZWjItReI” frameborder=”0″ allowfullscreen></iframe>
</div>

(notare che non devono necessariamente essere omesse le dimensioni dell’iframe, previste dal codice di incorporazione fornito da YouTube).

L’esempio è visualizzabile in questa pagina: vedi demo

Provando a ridimensionare la viewport, l’effetto del plugin è immediatamente visibile.

Esempio 2: utilizzo in una pagina reattiva

In questo secondo esempio supponiamo di dovere inserire il video in un layout a 2 colonne di larghezza complessiva pari a 800px, costruito con il metodo delle faux columns (proprietà float).

Il video è inserito nella prima colonna:


<!– prima colonna –>
<div id=”colonna1″>
<div class=”cont”>
<div class=”videoBox”>
<iframe width=”853″ height=”480″ src=”http://www.youtube.com/embed/kaIZWjItReI” frameborder=”0″ allowfullscreen></iframe>
</div>
</div>
</div>
<!– /prima colonna –>

(la classe .cont è impiegata per assegnare un padding alle colonne).

Le media query prevedono semplicemente che, quando la viewport ha una larghezza pari o inferiore a 799px (quindi insufficiente a contenere l’intero layout), le colonne si dispongano una sopra l’altra invece di affiancarsi.

A quel punto il video si ridimensiona per occupare il 100% dello spazio disponibile: dato che la dimensione originale dell’iframe e quindi quella del video stesso erano maggiori del necessario, il ridimensionamento non comporta alcuna perdita di qualità.

L’esempio è visualizzabile in questa pagina: vedi demo

Limitare le dimensioni massime del video

Usando questo plugin, come detto sopra il video si ridimensiona per occupare il 100% dello spazio disponibile: questo può andare bene nell’ipotesi in cui non ci siano problemi di sovra-dimensionamento del video stesso (come nell’Esempio 2 di cui sopra) ma altre volte è opportuno impostare una dimensione massima.

Una soluzione a questa esigenza è riportata nella pagina: https://github.com/davatron5000/FitVids.js/issues/10 e consiste nell’aggiungere un ulteriore contenitore intorno a quello usato da FitVids.js per poterlo dimensionare tramite CSS.

Si tratta dunque di sostituire la linea 66 del codice nel file FitVids.js:

$this.wrap(‘<div class=”fluid-width-video-wrapper”></div>’).parent(‘.fluid-width-video-wrapper’).css(‘padding-top’, (aspectRatio * 100)+’%’);

con la seguente:

$this.wrap(‘<div class=”videocontent”><div class=”fluid-width-video-wrapper” />’).parent(‘.fluid-width-video-wrapper’).css(‘padding-top’, (aspectRatio * 100)+”%”);

ed aggiungere queste proprietà nel foglio di stile:

.videocontent {
/* modificato il file jquery.fitvids.js come indicato nel link seguente ed aggiunta questa regola */
/* https://github.com/davatron5000/FitVids.js/issues/10 */
max-width: 500px;
}

impostando la larghezza massima del video al valore desiderato.

Sito del plugin: http://fitvidsjs.com/
FitVids.js su GitHub: https://github.com/davatron5000/FitVids.js

Una risposta a FitVids.js: plugin jQuery per l’inserimento di video reattivi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Sistema di comunicazione unificata VOIP
Sistema di comunicazione unificata VOIP per studi professionali, piccole, medie e grandi aziende
Categorie
Archivi
Statistiche
  • 22648Totale visitatori:
  • 50376Totale letture:
  • 5 Giugno 2008Da: