Tubular.js è un plugin di jQuery che consente di visualizzare un video di YouTube come sfondo della pagina adattandolo automaticamente alle dimensioni della finestra. Inoltre, jQuery Tubular consente anche di inserire nella pagina dei controlli per interagire con il video (play, stop, audio off, …).

jQuery Tubular è rilasciato con licenza MIT.

jQuery Tubular.js: un video di YouTube come sfondo del sito

jQuery Tubular js: un video di YouTube come sfondo del sito

Utilizzare jQuery Tubular

Per provare jQuery Tubular sul proprio computer può essere necessario configurare un server locale. Tubular visualizza il video all’interno di un #wrapper che dovrà estendesi per l’intera finestra.

<div id="wrapper">
  <h1>jQuery Tubular.js</h1>
  <!-- Tutto il contenuto della pagina -->
</div>

Rimuovere i margini e il padding del body oppure utilizzare un foglio di stile di reset. Impostare l’altezza del body e dell’elemento html al 100% e poi, l’altezza minima del #wrapper al 100% in modo che occupi sempre l’intera finestra.

body {
  margin: 0;
  padding: 0;
}
body, html {
  height: 100%;
}
#wrapper {
  min-height: 100%;
}

Inserire in fondo al documento, subito prima del tag di chiusura dell’elemento body, una copia di jQuery, seguita da una copia di jQuery Tubular e, infine, dallo script che attiva il plugin.

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
  $(function() {
   $('#wrapper').tubular({ videoId: 'IdVideoYouTube'});
  });
</script>
</body>
</html>

Nelle opzioni di jQuery Tubular è necessario inserire l’Id del video di YouTube da visualizzare.

Per conoscere l’id, selezionare un video su YouTube e poi, fare clic su Condividi oppure guardare sulla barra dell’indirizzo del browser.

I controlli del video possono essere inseriti in qualsiasi parte della pagina e sono una serie di link.

<a href="#" class="tubular-play">Play</a> |
<a href="#" class="tubular-pause">Pause</a> |

Ogni link è contrassegnato da una specifica classe che ne definisce la funzione. Modificare lo script in modo da attivare i controlli Play e Pause.

<script>
$(function() {
  $('#wrapper').tubular({
   videoId: 'IdVideoYouTube',
   playButtonClass: 'tubular-play',
   pauseButtonClass: 'tubular-pause'
  });
});
</script>
</body>
</html>

La lista completa delle opzioni con cui si può controllare il comportamento di jQuery Tubular è disponibile sul sito ufficiale del plugin.

Per visualizzare un video come sfondo di un elemento utilizzare fs wallpaper.