jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular

jQuery Plugin For Fullscreen YouTube Video Backgrounds - tubular
File Size: 21.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.