Skip to main content

How to play Youtube video as page background using jQuery ?

You might have seen some website which have video played on the background which automatically fit to screen and play when you access the page. Today I will show you how you can set Youtube video as page background using jQuery.

Watch Demo

jQuery Background video

We will use jQuery backround video V1.0 for our example, jQuery background video V1.0 is the plugin that lets you set the youtube video as page background.

 

Steps to add Youtube video as page backround

First of all create one index.html file and add following code, you need to add an id to <div>.

 

Adding jQuery libraries for the background video

 

 

Call the jQuery backround video plugin by adding following script

 

You need to set youtube video id here in script. Don’t know how to get video id from youtube? read the following step.

 

How to get Youtube Video id from Youtube ?

When you play a youtube video at https://www.youtube.com in address bar you will see the url as below

 

Options

All of the options below are available to customize your Youtube Background Player

Variable Default Type Description
ratio ratio: 16 / 9 int Sets video ratio dimensions
videoId LSmgKRx5pBo String Video Id: Specifies which Youtube Video
mute true boolean Mutes Youtube Video
width $(window).width() int Expands Video to width of container
pauseOnScroll false boolean Pauses Video During Scroll to help performance
repeat true boolean Loops Video
fitToBackground true boolean Fits to background vs fitting to the container specified with width
start 0 int Second in which video should begin playing at

Watch Demo

Hardik Joshi

Hardik Joshi is Founder, Developer and Writer at eCodezone.com, He loves to write usable code for the Web and other digital sources.