Full screen/background video from YouTube using jQuery

I was searching the web for some neat ideas and I came across this intriguing jQuery plugin that allows you to embed a YouTube video on your website. No, not the standard player, but instead the video is your background. Similar to how you would use an image or color, the YouTube video plays automatically in full screen as the background of your website; here is a demo of the plugin.

Embed YouTube video as your webpage’s background

The YouTube background video plugin requires jQuery (it is a plugin of course), so for the purposes of this example I will not download it and just reference jQuery’s CDN.

To start with you’ll want to grab your favorite YouTube video or a video your website has made that you want to make the transparent background. This page would make a great landing page for a link from an email campaign providing immediate video playing upon loading.

Once you have your video URL, you need to setup a div tag that contains the information the plugin will use to load the video in the background and begin playing:

[code]
<div id=”bgVideo” class=”player”
data-property=”{
videoURL:’https://youtu.be/6Wcw8Xg8Vb0′,
containment:’body’,
autoPlay:true,
mute:false,
startAt:0,
opacity:1
}”>Your video</div>
[/code]

All of the required information is contained inside the attribute called data-property as a JSON object. In the example above you can see options such as: auto play, mute, starting position and of course the video URL. There is a great opportunity to convert this code into a jQuery HTML template as I describe in another article.

To finish this off, you need a bit of JavaScript array and loading of the CSS to make the video the background:

[code]
<link href=”css/YTPlayer.css” media=”all” rel=”stylesheet” type=”text/css”>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js”></script>
<script src=”inc/jquery.mb.YTPlayer.js”></script>

jQuery(function(){
jQuery(“#bgVideo”).YTPlayer();
});
[/code]

Be sure to download the files from the GitHub repository. Here is the final source code:

[code]
<link href=”css/YTPlayer.css” media=”all” rel=”stylesheet” type=”text/css”>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js”></script>
<script src=”inc/jquery.mb.YTPlayer.js”></script>

<div id=”bgVideo” class=”player”
data-property=”{
videoURL:’https://youtu.be/6Wcw8Xg8Vb0′,
containment:’body’,
autoPlay:true,
mute:false,
startAt:0,
opacity:1
}”>Your video</div>

jQuery(function(){
jQuery(“#bgVideo”).YTPlayer();
});
[/code]