Lunedì 23 Ottobre 2017

Video a tutto schermo sotto al sito

Creato il: 24 aprile 2014

Sono riuscito a realizzare una cosa che volevo, e che credo cambi profondamente la struttura e la bellezza di un sito: inserire sullo sfondo, o su un div o dove volete, un bel video in autoplay muto!!!

Per dire, l’effetto è questo: http://www.d-ferrari.it/pagine/video_tutto_schermo.php
Bello vero (non io che scio con la GoPro, la pagina :-D)?

Svilupparla è molto semplice:
caricate jQuery e il plugin tubular.js che trovate sulla pagina ufficiale (http://www.seanmccambridge.com/tubular/)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script type="text/javascript" src="tubular.js"></script>

– chiamate il necessario nel dom ready

<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("xxxxxx").tubular({
			videoId:"yyyyyy",
			mute:false
		});
	});
</script>

dove xxxxxx è il vostro hook (nel mio caso è body) e yyyyyy l’id del video youtube che trovate nell’URL dello stesso.

Voilà!

Lascia un commento

Nome (richiesto)

Email (non sarà pubblicata) (richiesto)

Testo (richiesto)

Back
I cookie ci aiutano a migliorare i nostri servizi. Utilizzando il nostro sito, accetti i cookie sul tuo dispositivo. Più informazioni | Chiudi