Thursday, October 22FreeJQuery

jQuery Supported YouTube Player : ytPlayer

YouTube Player

jQuery Supported YouTube Player:

  • The plugin works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
    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 jQuery Supported YouTube Player.
  • The plugin doesn’t work with jquery.slim.js as it requires methods that have been removed from the slim version of jQuery.

head inclusions:

<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

<script src=""></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>

JS call:


HTML constructor:

<div id=”bgndVideo” class=”player” data-property=”{videoURL:’’,containment:’body’,autoPlay:true, mute:true, startAt:0, opacity:1}”>My video</div>


data-property is an attribute of the TAG where you can pass the options of the player as an Object. Any of the below parameters can also be passed as option within the initialize function. The one defined as attribute of the TAG wins.


  • mute: true (boolean) mute the audio;
  • showControls: true (boolean) show or hide the player controls;
  • useOnMobile: true (boolean) Define if the player should render on mobile devices.
  • mobileFallbackImage: absolute/path/to/image (string) The path to the fallback image in case of background video on mobile devices and the “useOnMobile” option is set to false;
  • coverImage: absolute/path/to/image (string) The path to the image used as background for the player if autoplay is set to false; if not set the player will show the first frame;
  • ratio: ‘4/3’, ‘16/9’ or ‘auto’ (string) to set the aspect ratio of the movie; if ‘auto’ the aspect ratio will be retreived form the getDataFromFeed method.
  • quality: ‘default’ or ‘small’, ‘medium’, ‘large’, ‘hd720’, ‘hd1080’, ‘highres’.
  • opacity: 0 to 1 (number) define the opacity of the video.
  • containment: (string) the CSS selector of the DOM element where you want the video background; if not specified it takes the “body”; if set to “self” the player will be instanced on that element.
  • optimizeDisplay: true (boolean) will fit the video size into the window size optimizing the view.
  • loop: false (boolean) or a number rapresenting how many times the video should loops once ended.
  • vol: 1 to 100 (number) set the volume level of the video.
  • startAt: 20 (number) Set the seconds the video should start at.
  • stopAt: 20 (number) Set the seconds the video should stop at. If 0 is ignored.

Using jquery.mb.YTPlayer:

To initialize a YTPlayer as simple player:

<div id=”P1″ class=”player” data-property=”{videoURL:’’,containment:’self’,startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}”> </div>

You can also download Youtube videos directly 

Leave a Reply

Your email address will not be published. Required fields are marked *