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

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

HTML

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

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

JS

Finally initialize the plugin.

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

To initialize a YTPlayer as simple player:

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

To initialize a YTPlayer as background:

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

See live demo and download source code.

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

Related