Play YouTube video as page background using Jquery


In my last tutorial I have used a jquery plugin to display responsive fullscreen 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 Tabular 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).

Attach jquery library file and jquery tabular library file. You need to add jquery library file to make this work.

Call the tabular plugin on the div ID/class which you have already set before.

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 )

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


About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.