Modern Responsive YouTube Playlist Player

Installation & Configuration.

Item Support Product Site

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Copy the Files

Installing this plugin is really easy. In your download folder is a folder called youtube-video-player. Copy that folder and its contents to your webserver.


Including the Files

The first thing you have to do is load the Javascript files and CSS files. Besides that you'll also need a copy of jQuery and the icon library. The "Open Sans" font is not required but recommended. Add the following code your the <head> of your website.

Note Keep in mind, that you may already have included the jQuery, and that you shouldn't include the same library twice.

<!-- Open Sans -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css" />

<!-- Icons -->
<link rel="stylesheet" type="text/css" media="screen" href="youtube-video-player/packages/icons/css/icons.min.css" />

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" media="screen" href="youtube-video-player/css/youtube-video-player.min.css" />

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Main Javascript -->
<script type="text/javascript" src="youtube-video-player/js/youtube-video-player.jquery.min.js"></script>

<!-- Perfect Scrollbar -->
<link rel="stylesheet" type="text/css" media="screen" href="youtube-video-player/packages/perfect-scrollbar/perfect-scrollbar.css" />
<script type="text/javascript" src="youtube-video-player/packages/perfect-scrollbar/jquery.mousewheel.js"></script>
<script type="text/javascript" src="youtube-video-player/packages/perfect-scrollbar/perfect-scrollbar.js"></script>


Dislaying a Playlist

You can attach a playlist to an element, so the first step is creating an element on the page where you'd like the playlist to be displayed. You can add unlimited youtube playlists on a single page.



<div id="myList"></div>

Get the Playlist Source

There are 4 kinds of playlists: custom playlists you have created, a channel playlist via user ID or user name, and an array of video ID's. The ID's for these can be found in the URL.

Note The User ID and User Name playlists are identical, use any of the two.


Custom Playlist ID

User ID

User Name

Video ID


Call the jQuery function

Next, attach the youtube playlist plugin to the element using jQuery. Either enter a playlist ID as 'playlist' option, a channel ID as 'channel' option, a user name as 'user' option, or a couple of video ID's as 'video' array.

Using custom playlist ID:

<script>
$(document).ready(function() {
  $('#myList').youtube_video({
    playlist: 'PL5A4nPQbUF8ANcyoy4...',
    /* other options here */
  });
});
</script>
 

Using User ID:

$('#myList').youtube_video({
  channel: 'UCjOl2AUbl...',
  /* other options here */
});

Using User Name:

$('#myList').youtube_video({
  user: 'someuser',
  /* other options here */
});

Using Video ID's:

$('#myList').youtube_video({
  videos: ['UCjOl', 'GsQ3h'],
  /* other options here */
});

Options

Here's a complete list of all the options, their default values and their function. Options should be given as an object and the order doesn't matter. You cannot define the same option twice. All options are optional, except for playlist or channel option.

$('#vd').youtube_video({

playlist: false,
channel: false,
user: false,
videos: false,
api_key: '...',
max_results: 50,
pagination: true,
continuous: true,
shuffle: false,
first_video: 0,
show_playlist: 'auto',
playlist_type: 'vertical',
show_channel_in_playlist:true,
show_channel_in_title: true,
width: false,
show_annotations: false,
now_playing_text: 'Now Playing',
load_more_text: 'Load More',
autoplay: false,
force_hd: false,
hide_youtube_logo: false,
play_control: true,
time_indicator: 'full',
volume_control: true,
share_control: true,
fwd_bck_control: true,
youtube_link_control: true,
fullscreen_control: true,
playlist_toggle_control:true,
volume: false,
show_controls_on_load: true,
show_controls_on_pause: true,
show_controls_on_play: false,
description_toggle: false,
related: false,
require_cookie_accept: true,
require_cookie_accept_message: '[...]',
player_vars: {},
colors: {},

on_load: fn(e) {},
on_done_loading: fn(e) {},
on_state_change: fn(e) {},
on_seek: fn(e) {},
on_volume: fn(e) {},
on_time_update: fn(e) {},

});
Name Type Default Description
playlist string false Playlist ID of the playlist you want to display.
channel string false Channel ID of the channel you want to display.
user string false User name of the user you want to display.
videos array false Array of video ID's you want to display.
api_key string default YouTube API Key. You can use the default key, but it is highly recommended you change it as the default key only supports a limited number of calls.
max_results int 50 Amount of video's to load. The maximum of this option is 50 due to YouTube's API limitations, but with pagination enabled you can retrieve up to 50 video's each time.
pagination bool true When enabled, a button "Load More" will show to load more video's once the max_results limit is reached.
continuous bool true Continue to the next video in the playlist after the video is done playing.
shuffle bool false When enabled, the playlist will be shuffled upon loading.
first_video int/string 0 Either the index of which video to show first, starting at 0 or enter the video ID of the video you want to load, eg: sGJUS68N7vM.
show_playlist bool/string 'auto' Show or hide the playlist on load with true or false. When set to 'auto' it will automatically show or hide depending on the player's width.
playlist_type string "vertical" Set the layout of the player. Choose either "vertical" or "horizontal".
show_channel_in_playlist bool true Display the channel name in the playlist of videos.
show_channel_in_title bool true Display the channel name in the title of the video.
width int 100% The width of the video. By default it is 100% of the parent width and scales automatically.
now_playing_text string "Now Playing" Now playing text in the playlist.
load_more_text string "Load More" Load more text in the playlist.
autoplay bool false Autoplay the video when the page loads.
force_hd bool false Force the player to show HD (720p/1080p) content.
hide_youtube_logo bool false This option lets you use a YouTube player that does not show a YouTube logo.
play_control bool true Show the play/pause button in the controls bar.
time_indicator bool/string "full" Show or hide to elapsed time in the controls bar with true or false. To show both the elapsed time and end time, enter "full".
volume_control bool true Show a volume slider in the controls bar to adjust the playback volume.
share_control bool true Display button to share the video on facebook, twitter or google+.
fwd_bck_control bool true Display a forward and backward button for users to cycle through the playlist.
youtube_link_control bool true Show a YouTube link in the control bar which opens the video on youtube.com when clicked.
fullscreen_control bool true Display a button in the controls bar to view the video in fullscreen. Note: not all browsers support fullscreen. On these browsers the button will always be hidden.
playlist_toggle_control bool true Display a button in the controls bar to toggle the playlist on the side.
volume int default The starting playback volume of the video. This is be a number between 0.0 and 1.0. By default it's youtube's default playback volume.
show_controls_on_load bool true Whether or not to show the controls upon loading the page. When disabled, the user will only see a play button on top of the poster image upon loading the page.
show_controls_on_pause bool true Whether or not to show the controls when the video is paused.
show_controls_on_play bool false Whether or not to show the controls when the video is playing.
description_toggle bool false When enabled it will show a little button in the right top corner which toggle's the video description.
related bool false When enabled it will show related videos while paused or stopped.
require_cookie_accept bool false When enabled it will prompts the user to accept cookies before loading the YouTube embedded video required for the GDPR law.
require_cookie_accept_message string [...] Text to show to prompt user to accept cookies.
player_vars object { ... } Additional YouTube player parameters.
colors object { ... } Customize the colors here. Read more about this in one of the following chapters.

Callbacks

These callbacks are fired when various events happen. An example of how to use them:

$('#vd').youtube_video({
playlist: '...',
on_play: function() {
  alert('The play button was clicked');
},
on_seek: function(seconds) {
  alert('The video was seeked to '+seconds+' seconds');
}
});
Name Parameter Description
on_load video_obj Called when a new video is being loaded. The parameter returns the "snippet" part from the YouTube API containing details about the new video.
on_done_loading videos Called when the playlist has finished loading. The parameter returns the playlist with videos and video details.
on_state_change state Called when the state of the video changes.
  • -1 – unstarted
  • 0 – ended
  • 1 – playing
  • 2 – paused
  • 3 – buffering
  • 5 – video cued
on_seek seconds Called when the video seeks. The parameter returns the time in seconds to where the video is seeked.
on_volume volume Called when the user changes the playback volume. The parameter returns the new volume, an integer between 0.0 and 1.0
on_time_update seconds Called each time the time of the video changes. When it's playing this function will roughly fire every half a second. The parameter returns the current time in seconds of the video.

It is highly recommended you register your own key and use it instead of the default key. The reason for this is that many people will be using the default key and it has a limited number of requests per month. Once you have registered your own key, use it as the 'api_key' option in the options.

For a guide on registering your own API key click here.



The video player has a couple of methods you can call. They are functions you can call to control the video player's behavior, like pausing it or controlling the volume. Methods are for more advanced users who wish to integrate the video player into their own apps.


Usage

Once you have initialized the video player (with the youtube_video function), you can call its methods.

<script>
    $('#myVideo').youtube_video_play();    // Play the video
</script>
<script>
    $('#myVideo').youtube_video_seek(15);  // Seek to 15 seconds
</script>

Available Methods

Here is a list of the available methods you can call and a description.

Name Parameter Description
youtube_video_play none The video will start playing.
youtube_video_pause none The video will pause.
youtube_video_stop none The video will stop playing and buffering.
youtube_video_load index Index of the video in the playlist to load.
youtube_video_seek seconds The video will jump to the number of seconds in time.
youtube_video_volume volume The playback volume will be adjusted to the new volume. The parameter 'volume' is an integer between 0.0 and 1.0

There are a couple of colors you can customize to make the player your own. All the colors have to be set in the 'color' option. Colors can be hexadecimals (eg #D382FF), but also rgba's to make them translucent (eg rgba(255, 144, 144, 0.5)).


Parts To Color

These are the available parts you can color and their default values.

$('#myPlaylist').youtube_video({
  playlist: '...',
  colors: {
    controls_bg:      'rgba(0,0,0,.75)',
    buttons:          'rgba(255,255,255,.5)',
    buttons_hover:    'rgba(255,255,255,1)',
    buttons_active:   'rgba(255,255,255,1)',
    time_text:        '#FFFFFF',
    bar_bg:           'rgba(255,255,255,.5)',
    buffer:           'rgba(255,255,255,.25)',
    fill:             '#FFFFFF',
    video_title:      '#FFFFFF',
    video_channel:    '#DFF76D',
    playlist_overlay: 'rgba(0,0,0,.75)',
    playlist_title:   '#FFFFFF',
    playlist_channel: '#DFF76D',
    scrollbar:        '#FFFFFF',
    scrollbar_bg:     'rgba(255,255,255,.25)',
  },
  /* other options here */
});

Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.