Full screen/background video from YouTube using jQuery

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:

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

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:

<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();
});

Be sure to download the files from the GitHub repository. Here is the final source 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();
});

Published on Feb 17, 2020

Tags: JavaScript | jQuery Tutorial