Play YouTube video as page background using jQuery

Play YouTube video as page background using Jquery

In my last tutorial I have used a jQuery plugin to display responsive full screen background image/ image slideshow, this one is for video lovers, In this tutorial I will be explaining how to play YouTube video as page background using jQuery.

View Demo

Jquery Tubular plugin

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. All you need is to attach it to your page element, set some options, and you are done. You can also download the source code at google code.


Steps to Add YouTube video to page background

Create a simple html file say index.html and add this code below. Add a container with unique ID/class (mandatory).

<!DOCTYPE html>
	<title>Play YouTube video as page background using Jquery -</title>
		<!-- you can also use class or your choice -->
		<!-- <div class="bigcontainer"></div> -->
		<div id="container"></div>

Attach jQuery library file and jQuery tabular library file. You need to add jQuery library file to make this work.
<script src= "jquery-2.1.3.min.js" ></script>
<script src="jquery.tubular.1.0.js"></script>

Call the tabular plugin on the div ID/class which you have already set before.
<script type="text/javascript">
            $(document).ready(function() {
                var options = { videoId: 'AFbBgtWHPks', start: 3, mute : false, playButtonClass: 'play', pauseButtonClass: 'pause', muteButtonClass: 'mute', volumeUpClass: 'vol-up', volumeDownClass: 'vol-down', increaseVolumeBy: 5};

How can you get the YouTube video ID

When you play any video in YouTube, in the address bar you will get a link for e.g.

I have a video in YouTube ( Online Inventory System with PHP and MySQL )

E_vK9Se8TRM is the video ID

Option for tabular plugins

Option Default
ratio 16/9 ( 4/3 or 16/9 )
videoId ZCAnLxRvNNc
mute true
repeat true
width $(window).width()
wrapperZIndex 99
playButtonClass ‘tubular-play’
pauseButtonClass ‘tubular-pause’
muteButtonClass ‘tubular-mute’
volumeUpClass ‘tubular-volume-up’
volumeDownClass ‘tubular-volume-down’
increaseVolumeBy 10 (range is 1-100)
start 0 ( starting position in seconds)

View Demo

Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.


Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.