Skip to content

Instantly share code, notes, and snippets.

@ethyde
Last active August 29, 2015 14:07
Show Gist options
  • Select an option

  • Save ethyde/318f18dffc0f93ff690c to your computer and use it in GitHub Desktop.

Select an option

Save ethyde/318f18dffc0f93ff690c to your computer and use it in GitHub Desktop.
Youtube playslist - Jquery plugin
<div class="playlist clearfix" data-playlist="PLO9aNMUaQmH9Hdhq5ICGHOC6zrjJ0NQID"></div>
<div class="playlist clearfix" data-playlist="PLliN_STKLPP2_aiUEeewQA-R8GuS9o-25"></div>
$('.playlist').youtubePlaylist();
;(function( window, document, $, undefined ) {
'use strict';
var YTPlaylist = YTPlaylist || {};
YTPlaylist.defaultOptions = {};
YTPlaylist.init = function(element, options){
var base = this;
base.$element = $( element );
base.element = element;
base.idPlaylist = base.$element.data('playlist');
base.$contentPlayer = $('<div />', {'class': 'contentPlayer'});
base.$Player = $('<div />', {'id' : 'player_' + base.idPlaylist, 'class': 'player'});
base.$contentPlaylist = $('<div />', {'id' : 'playlist_' + base.idPlaylist, 'class': 'playlist'});
base.options = $.extend({}, YTPlaylist.defaultOptions, options );
YTPlaylist.getPlaylist(base);
base.$element.append( base.$contentPlayer.append(base.$Player), base.$contentPlaylist );
base.YTjqxhr.done(function(data){
base.playlist = data;
YTPlaylist.titlePlaylist(base);
YTPlaylist.constructHtmlPlaylist(base);
YTPlaylist.videoPlayer(base.playlist.feed.entry[0].media$group.yt$videoid.$t, base.idPlaylist);
YTPlaylist.eventItemPlaylist(base);
});
};
YTPlaylist.titlePlaylist = function(base){
$('<div />', {
'class':'titlePlaylist',
text : base.playlist.feed.media$group.media$title.$t
}).prependTo(base.$element);
};
YTPlaylist.constructHtmlPlaylist = function(base){
var item = base.playlist.feed.entry;
var entryLength = item.length;
var list = '<ul>';
for (var i = 0; i < entryLength; i++) {
list += '<li data-video="' + item[i].media$group.yt$videoid.$t + '">' + item[i].media$group.media$title.$t + ' duration ' + YTPlaylist.timeConvertor( item[i].media$group.yt$duration.seconds ) + '</li>';
}
list += '</ul>';
base.$contentPlaylist.append(list);
};
YTPlaylist.eventItemPlaylist = function(base){
base.$element.on('click', 'li', function(){
var videoID = $(this).data('video');
base.$contentPlayer.empty();
base.$contentPlayer.append(base.$Player);
YTPlaylist.videoPlayer(videoID, base.idPlaylist);
});
};
YTPlaylist.timeConvertor = function(duration){
var minutes = Math.floor(duration / 60),
seconds = duration - minutes * 60,
time;
if( minutes < 10 ){
minutes = '0' + minutes;
}
if( seconds < 10 ){
seconds = '0' + seconds;
}
time = minutes + ':' + seconds;
return time;
};
YTPlaylist.getPlaylist = function( base ){
var realplaylist = '//gdata.youtube.com/feeds/api/playlists/' + base.idPlaylist;
base.YTjqxhr = $.ajax({
type: 'GET',
url : realplaylist,
data: { 'v': '2', 'alt':'json', 'format':'5', 'max-result': '50' },
dataType : 'json'
});
};
YTPlaylist.videoPlayer = function(idVideo, idPlaylist){
new YT.Player('player_' + idPlaylist, {
height: 200,
width: 200,
videoId: idVideo
});
};
$.fn.youtubePlaylist = function( options ) {
$.getScript('//www.youtube.com/player_api');
// use each if more than one element in pages
return this.each(function () {
new YTPlaylist.init( this, options );
});
};
})( window, document, jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment