Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A simple way to fetch data from youtube api xml feed for a single playlist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" dir="ltr" lang="en-US">
<head profile="">
<style type="text/css">
/* placeholder inline styles */
body { font-family: arial, verdana; }
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; }
<script src=""></script>
<script src="" type="text/javascript"></script>
<script type="text/javascript">
google.setOnLoadCallback(function () {
// setup the click handler
function loadVideo(video) {
$('#videos h3').text(video.title);
'<iframe title="', video.title, '" width="560" height="349" src="', video.href, '" frameborder="0" allowfullscreen></iframe>'
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 = "";
new google.feeds.lookupFeed(feedUrl, function (result) {
if (result.error || !result.url) {
// get the feed items
var feed = new google.feeds.Feed(result.url);
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 ([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="'+vidhash+'&feature=youtube_gdata&rel=1" class="yt-vid-link" title="'+entry.title+'"><img src="'+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="'+vidhash+'" class="yt-vid-link" title="'+entry.title+'"><img src="'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n');
// load the first video
$(".yt-vid-link:first").each(function () {
return false;
// setup the click handler for all the videso
$(".yt-vid-link").click(function () {
return false;
google.load("feeds", "1");
<div id="videos">
<div id="videocomm">
<h3>Please Wait....</h3>
<div id="youtubeVideo">
Insert video here
<p>Click a thumbnail below to watch the video.</p>
<div class="slider">
<div id="fragment-1">
<ul class="youtubeFeed">

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, 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment