Cell. +39 3479684755

Il Blog di Instant Websites

Tag: video reattivi

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.

Continua a leggere

Categorie
Archivi