public

A simple way to fetch data from youtube api xml feed for a single playlist

  • Download Gist
youtube-xml-javascript-playlist-parser
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
 
<head profile="http://gmpg.org/xfn/11">
 
<style type="text/css">
/* placeholder inline styles */
 
body { font-family: arial, verdana; }
 
a,
a img { text-decoration: none; }
 
ul.youtubeFeed {
margin: 0;
padding: 0;
}
 
ul.youtubeFeed li {
float: left;
width: 150px;
list-style-type: none;
font-size: 11px;
height: 170px;
}
 
ul.youtubeFeed li div { width: 118px; }
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 
<script type="text/javascript">
google.setOnLoadCallback(function () {
// setup the click handler
function loadVideo(video) {
 
$('#videos h3').text(video.title);
 
$('#youtubeVideo').html([
'<iframe title="', video.title, '" width="560" height="349" src="', video.href, '" frameborder="0" allowfullscreen></iframe>'
].join(""));
return false;
}
 
// get the feed info
// setting max-results delivers you the maximum of 50, you can remove to default to 25. Use feed.setNumEntries to strip down to a range between 50 and 25.
var feedUrl = "http://gdata.youtube.com/feeds/api/playlists/84FBB60DFE42481F?max-results=50";
new google.feeds.lookupFeed(feedUrl, function (result) {
if (result.error || !result.url) {
$('#videocomm').hide();
return;
}
// get the feed items
var feed = new google.feeds.Feed(result.url);
feed.setNumEntries(50);
feed.load(function (result) {
// write out the feed data
var container = $(".youtubeFeed");
//var totalcount = result.feed.entries.length;
//alert (totalcount);
 
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var vidhash = /=(.*)&(.*)$/.exec (entry.link)[1];
// uncomment this and comment out the item below if you find rendering of the player a bit slow
// container.append('<li><div><a href="http://www.youtube.com/v/'+vidhash+'&feature=youtube_gdata&rel=1" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n');
 
// comment the item below and uncomment the item above if you find the player swap too slow
container.append('<li><div><a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n');
}
// load the first video
$(".yt-vid-link:first").each(function () {
loadVideo(this);
return false;
});
// setup the click handler for all the videso
$(".yt-vid-link").click(function () {
loadVideo(this);
return false;
});
});
});
});
google.load("feeds", "1");
</script>
 
</head>
 
<body>
 
<div id="videos">
 
<div id="videocomm">
 
<h3>Please Wait....</h3>
 
<div id="youtubeVideo">
 
Insert video here
 
</div>
 
<p>Click a thumbnail below to watch the video.</p>
 
<div class="slider">
 
<div id="fragment-1">
 
<ul class="youtubeFeed">
 
</ul>
 
</div>
 
</div>
 
</div>
 
</div>
 
</body>
</html>

This is a fantastic script. It's easily the simplest and still most functional I've come across. Thank you so much.

I do have a question. Is there any manner in which it's possible to link to a specific video on the playlist? Meaning if I had this page living at www.awesomeyoutubescript.com/awesome.html, is there any extension that could be added to that url that would link to a specific video within the playlist?

And if so, is there a way to make create a link that would go with each video?

Even if not, but slightly related... I noticed YouTube has gone away form including sharing options in their embedded videos. And it also seems like, at least in this player, the option to switch between video resolutions is not available. Is there a way to use a skin that does allow those options?

Thanks! Again, this is really great work.

(Scuse my basic english)
Hi, thanks for the code, great work, really helpful.
My question is: i'm trying to set an autoplay for the playlist item.
I've use the: $('.yt-vid-link').bind('ended',function(){ /// action here/// }); but nothing append
Thanks again!

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.