Created
April 6, 2011 19:14
-
-
Save toddstowell/906313 to your computer and use it in GitHub Desktop.
A simple way to fetch data from youtube api xml feed for a single playlist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
(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
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.