Previously, we shared with you 5 of the best jQuery plugins to add a video as background in your website. Those plugins allow you to embed videos from your own server (or external servers) as long as they are served in mp4, ogg, wav etc. However, what if you don't want to host your videos but instead use a service like YouTube for it ? Surely the plugins mentioned on the top aren't option for you.
Fortunately, there's another plugin that you can start using to use videos hosted in YouTube as background for your website, we are talking about the jquery.mb.YTPlayer plugin.
1. Download and include jquery.mb.YTPlayer
The first thing you need to do to add a video from YouTube as background for your website is to download the jquery.mb.YTPlayer plugin. This open source jQuery component allows you to easily build your custom Youtube player or to use any Youtube video as background for your page. You will need basically 3 files:
jQuery(obviously as this is a jQuery Plugin)YTPlayer.css(basic styles for the video background)jquery.mb.YTPlayer.js(the plugin file)
You can get the 2 files of the plugin from the releases of the project in Github here (zip file) or downloading from the browser the files from the dist folder of the repository. After downloading the files, simply include them as references using the script and link tags in your document:
Important
The plugin, as many others, require that the HTML document be served from a server (http or https protocol). Accesing the plugin from the file:// protocol, will make the plugin unusable.
<!-- Include Styles of the background player -->
<link href="YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="jquery.mb.YTPlayer.js"></script>After including the files, you will be able to use the plugin easily. For more information about this plugin, please visit the official repository at Github here or read the docs.
2. Using the plugin
The plugin is really easy to use, so the only problem for you is basically to know which video to use. The Plugin needs to be initialized on an abstract DOM element. With abstract we mean that the element won't be visible to the user theoretically as it plays like an "invisible controller" for the background video, so the initialization and other methods (like play,pause) would be used in this element, however the video won't be played on this element:
<!-- Video Abstract Controller -->
<div id="controller"></div>
<!-- if you want it inside a custom element -->
<div id="video-container" style="width: 640px;height: 480px;"></div>
<script>
$("#controller").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// use "body" for the entire screen
// or a selector for a custom element
containment: "#video-container"
// for more initialization options,
// please read the docs
});
</script>To decide where the video should appear, during the initialization, the argument object expects an option namely container, where you should provide a DOM selector (element ID or class), so if you want it to appear as fullscreen, you should use body as the container. There are many initialization options for the plugin, so you may want to read what's interesting for you in the docs in the initialization area.
Fullscreen example
The following document shows how to use a YouTube video as background of the entire page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Styles of the player -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define the control element of the youtube video. This element is abstract and
is only to, as mentioned, to control the video. When you want to make changes to
the player, cast the functions of YTPlayer in this element
-->
<div id="player-control"></div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// If you want it as background of your website
// or of an element e.g #elementId
containment: "body",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Hide YouTube Controls
showControls: false,
onReady: function(){
console.log("Player succesfully initialized");
},
onError: function(err){
console.log("An error ocurred", err);
}
});
});
</script>
</body>
</html>Custom DOM element example
The following example shows how to set a YouTube video as background of a custom element of your document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Styles of the player -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<style>
/* Define some dimensions to the container where the video will appear */
#dom-element {
width: 600px;
height: 400px;
position: relative;
top: 0;
left: 0;
z-index: 0;
background-size: cover;
}
</style>
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define the control element of the youtube video. This element is abstract and
is only to, as mentioned, to control the video. When you want to make changes to
the player, cast the functions of YTPlayer in this element.
-->
<div id="player-control"></div>
<!-- The Video will appear in this element -->
<div id="dom-element"></div>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Include Plugin Core -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// As we want it as background of a custom element, we'll use
// the ID of the custom element
containment: "#dom-element",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Hide YouTube Controls
showControls: false,
onReady: function(){
console.log("Player succesfully initialized");
},
onError: function(err){
console.log("An error ocurred", err);
}
});
});
</script>
</body>
</html>Happy coding !
