Controller.js

Getting Started

1. YouTubeController depends on the jQuery library, so be sure to include it within your markup.

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

2. Tag your html element with either a class or id attribute so that the controller can reference it.

                                       
   <!-- HTML -->
   
   <div id="playerId">
   ...
   </div>
                                       
                                   

3. Attach the YouTubeController object onto your html element, add the required videoId and you're done!

   If you are wondering where you can find your video's videoId here is a helpful video.

                                   
   // JavaScript
   
   var ytController = $("#playerId").YTController({
       videoId: "youtube_video_id"
   });
                                   
                               

Options / Parameters

You can configure the player with the following settings:

apiKey

Token which grants access to the YouTube Data API (v3). Having this will allow the controller to make REST calls to the YouTube Data API to gather info about playlists, video statistics and more.

To get the full benefit of the controller you should create an api key.

displayPlaylist

Flag indicating whether you want to display playlist information.

In order for the playlist to display you also need to set playListId.

playerVars

Optional parameters which allows you to configure the player in finer detail.

Reference player parameters for further information.

height

The height of the embedded iFrame player.

listItemClickHandler

A callback function which is triggered when a playlist item has been clicked.

listItemHTMLTemplate

An HTML template to display playlist items.

This is the content that will be generated for each playlist entry. As you can see there are optional special tokens which allow you to display certain info about a playlist entry.

                                        
<!-- Default Playlist Item Template -->
<div>
    <img src="[playlistItem_thumb]"/>
    <span>[playlistItem_timestamp]</span>
    <h4>[playlistItem_title]</h4>
    <p>[playlistItem_description]</p>
</div>
                                        
                                    

You can generate any nested or un-nested markup you'd like, just as long as you have one or more of these special tokens.

1. [playlistItem_thumb]The video thumbnail. Since there are several thumbnail sizes to choose from you may want to specify listItemThumbNailJSONPath
2. [playlistItem_timestamp]The upload date of the video.
3. [playlistItem_title]The title of the video.
4. [playlistItem_description]The description of the video.

listItemThumbNailJSONPath

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.

By default thumbnails.default is used which is a 120px x 90px size image.

maxNumListItems

A number indicating how many playlist items to display.

onApiChangeHandler

A callback function which is triggered when the player has loaded.

onErrorHandler

A callback function when an error occurs within the player.

onPlaybackQChangeHandler

A callback function when the playback quality has changed.

onPlaybackRChangeHandler

A callback function when the playback rate has changed.

onReadyEvtHandler

A callback function when the player has finished loading and ready to receive api calls.

onStateChangeHandler

A callback function when the player has changed.

Some states are: Playing, Stopped, Paused, etc.,

playListId

An id referring to a YouTube playlist.

playListParentId

An HTML element which contains the playlist items.

This must be an id, since there should only be one container per id.

videoId

An id referring to a YouTube video.

This will be the initial video loaded into the player, be sure to set this parameter.

width

The width of the embedded iFrame player.

API / Methods

YouTubeController provides various methods for you to control the embedded iFrame video player.

                                
// Configure the controller to your liking and save the returned controller object into a variable.

var ytController = $("#playerId").YTController({
    videoId: "youtube_video_id"
    ... // Additional parameters
});

// Call methods on the returned controller object.

ytController.play();
                                
                            

play()

Plays the loaded video within the player.

stop()

Stops the video within the player.

pause()

Pauses the video within the player.

previous()

Plays the previous video within the playlist.

This will only work if the playListId is set on the controller.

next()

Plays the next video within the playlist.

This will only work if the playListId is set on the controller.

mute()

Mutes the sound of the video within the player.

unmute()

Unmutes the sound of the video within the player.

stats()

Retrieves statistics about the video within the player.

getPlayer()

Retrieves the video player object.

This convenient method retrieves the player object allowing you to gain full access to the YouTube IFrame API.

Since we return the player object here, you lose jQuery chainability.

destroy()

Removes the iframe player as well as references to the controller object on the attached DOM element.