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