Create Custom Youtube player or to use a Youtube video as background

In this post I am going to share awesome jQuery plugin to Create Custom Youtube player or to use a Youtube video as background. The plugin name is jquery.mb.YTPlayer which i recently found on internet so I thought I must share this plugins with you. With the help of this jQuery plugin you can easily build your custom Youtube player or use a Youtube video as background for your web page. It support youtube api to customize the video player actions. If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows, LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost. It doesn’t work if you run the HTML page as file (file://…).



Libraries

Include plugins (JS+CSS) libraries on page along with jQuery core library

<!--CSS -->
<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
 
<!--JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>

HTML

Create html constructor pass data-property to cutomize the youtube player actions.

<div id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</div>

JS

Finally initialize the plugin.

$(function() { 
 $("#bgndVideo").YTPlayer();
});




To initialize a YTPlayer as simple player:

<div id="P1" class="player" 
     data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>

To initialize a YTPlayer as background:

<div id="bgndVideo" class="player" 
     data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">
</div>

See live demo and download source code.

DEMO | DOWNLOAD

See official documentation for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.