jQuery Plugin For Custom Youtube Video Controler

File Size: 4.95 KB
Views Total: 1774
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Custom Youtube Video Controler

YouTube_Controller.js is a jQuery wrapper around the latest Youtube Data API which makes it easier to control the Youtube video player embedded in the document.

How to use it:

1. Include the youtube_controller.js JavaScript file on your HTML page after referencing jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="youtube_controller.js"></script>

2. Create a container element to place the Youtube video player.

<div id="playerContainer">

3. Call the function on the player container and insert your own API key & video ID.

  videoId: "6k8qeqZycgE",
  apiKey: "AIzaSyCmq9OXz3ezp883KTeRFSyygzvzdnRKHJ4"

4. All possible options to config the Youtube video player.


  // enable play list
  displayPlaylist: false,

  // Youtube player parameters
  playerVars: undefined,

  // height of the player
  height: "390",

  // width of the player
  width: "640"

  // triggered when a playlist item has been clicked
  listItemClickHandler: function(){},

  // template for the playlist
  listItemHTMLTemplate: "<div><img src='[playlistItem_thumb]'/><span>[playlistItem_timestamp]</span><h4>[playlistItem_title]</h4><p>[playlistItem_description]</p></div>",

  // A string delimited by periods '.' to represent which thumbnail to choose from. 
  // While making a call to the YouTube API a JSON feed is returned in which we traverse for the thumbnail image.
  listItemThumbNailJSONPath: "thumbnails.default",

  // how many playlist items to display
  maxNumListItems: 1,

  // event handlers
  onApiChangeHandler: $.noop,
  onErrorHandler: $.noop,
  onPlaybackQChangeHandler: $.noop,
  onPlaybackRChangeHandler: $.noop,
  onReadyEvtHandler: $.noop,
  onStateChangeHandler: $.noop,

  // playlist ID
  playListId: undefined,

  // parent ID
  playListParentId: undefined


5. API methods:

var myControler = $("#playerContainer").YTController({

    // options here


// Plays the video

// Stops the video

// Pauses the video

// Plays the previous video

// Plays the next video

// Mutes the sound of the video

// Unmutes the sound of the video

// Retrieves statistics about the video

// Retrieves the video player object.

// Destroy and removes the player

This awesome jQuery plugin is developed by WatersChurch. For more Advanced Usages, please check the demo page or visit the official website.