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">
</div>

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

$("#playerContainer").YTController({
  videoId: "6k8qeqZycgE",
  apiKey: "AIzaSyCmq9OXz3ezp883KTeRFSyygzvzdnRKHJ4"
});

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

$("#playerContainer").YTController({

  // 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
myControler.play()

// Stops the video
myControler.stop()

// Pauses the video
myControler.pause()

// Plays the previous video
myControler.previous()

// Plays the next video
myControler.next()

// Mutes the sound of the video
myControler.mute()

// Unmutes the sound of the video
myControler.unmute()

// Retrieves statistics about the video
myControler.stats()

// Retrieves the video player object.
myControler.getPlayer()

// Destroy and removes the player
myControler.destroy()

---

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