jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular

tubular is a simpe jQuery plugin that allows you to use a youTube video as a full-screen dynamic background on your website. It also come with some video controls: play, pause, volume up, volume down, and mute.

See also:

• Fullscreen Background Video Plugin For jQuery - BigVideo
• Awesome Video Background Plugin with HTML5 and Youtube API - YTPlayer

How to use it:

1. Include jQuery library and jQuery tubular on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>

2. Set the Youtube video ID in the javascript

$('document').ready(function() {
	var options = { videoId: 'e4Is32W-ppk', start: 3 };
	$('#wrapper').tubular(options);
});

3. Create some video controls

<div id="wrapper">
<a href="#" class="tubular-play">Play</a>
<a href="#" class="tubular-pause">Pause</a>
<a href="#" class="tubular-volume-up">Volume Up</a>
<a href="#" class="tubular-volume-down">Volume Down</a> 
<a href="#" class="tubular-mute">Mute</a></p>
</div>

4. Options

ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed
videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
mute: true
repeat: true
width: $(window).width() // no need to override
wrapperZIndex: 99
playButtonClass: 'tubular-play'
pauseButtonClass: 'tubular-pause'
muteButtonClass: 'tubular-mute'
volumeUpClass: 'tubular-volume-up'
volumeDownClass: 'tubular-volume-down'
increaseVolumeBy: 10 // increment value; volume range is 1-100
start: 0 // starting position in seconds

Change log:

2015-11-12

• Video player is now hidden while its initially buffering (and showed when starts playing)

---

This awesome jQuery plugin is developed by hasMobi. For more Advanced Usages, please check the demo page or visit the official website.