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>.

 

Youtube Like Progress bar using jQuery Nprogress.js

If you ever notice on Youtube you have seen a progress bar on top of the page, which shows you the page loading time. Now a days most of the Apps and Web pages are using this kind of Progress effect to attract viewer and force them to stay for few seconds on page until it loads.

The dynamic in-site progress bar on Youtube shows the loading animation on the top header area till the video or page load completely in the browser. Normally loaders are the rounded .gif images with different effects, which shows a progress but here the progress loader bar is actually a slim progressive line on the top of the header, which loads from left to right or vise versa until the page finish the loading stage.