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.