Cell. +39 3479684755
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.