Skip to content

Instantly share code, notes, and snippets.

@joniahola

joniahola/youtubeplaylist.html

Created February 3, 2013 22:56
Show Gist options
  • Save joniahola/4704107 to your computer and use it in GitHub Desktop.
Save joniahola/4704107 to your computer and use it in GitHub Desktop.
Download ZIP
Simple youtube playlist-player. Only need to know youtube playlist url and insert to get-parameter 'url'. I found basic logic to find videos (if I remimber right) in this script snip: https://gist.github.com/906313
Raw
youtubeplaylist.html
<!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">
<!-- Made by: Joni Ahola, 2012 -->
<!-- Easily embed youtube playlist: just add GET-parameter 'url' and youtube-playlist url -->
<!-- Example: filename.html?url=http://www.youtube.com/playlist?list=PLE5C2870574BF4B06 -->
<head profile="http://gmpg.org/xfn/11">
<style type="text/css">
/* placeholder inline styles */
body { font-family: arial, verdana; margin: 0; padding: 0; }
a,
a img { text-decoration: none; }
div #youtubeVideo
{
display: block;
float: left;
display: block;
margin: 0;
padding: 0;
margin-right: 1px;
}
div.slider
{
display: block;
width: 300px;
height: 220px;
overflow:auto;
}
ul.youtubeFeed {
margin: 0;
padding: 0;
}
ul.youtubeFeed li {
list-style-type: none;
font-size: 11px;
line-height:120%;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 2px;
padding-right: 2px;
background: #AAA;
margin: 1px;
}
ul.youtubeFeed li:hover {
background: #CCC;
}
ul.youtubeFeed li b {
font-size: 11px;
float: left;
display: block;
}
ul.youtubeFeed li a {
padding-left: 1px;
color: black;
display: block;
white-space: normal;
text-decoration: none;
}
#red {
background: red;
}
ul.youtubeFeed li div { }
</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) {
$('#youtubeVideo').html([
'<iframe title="', video.title, '" width="392" height="220" src="', video.href, '" frameborder="0" allowfullscreen></iframe>'
].join(""));
return false;
}
function loadFeed(host_feedUrl, index, showing_index)
{
var feedUrl = host_feedUrl+index;
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(25);
feed.load(function (result) {
if(result.feed.entries.length > 0)
{
if(!result.error)
{
// write out the feed data
var container = $(".youtubeFeed");
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><b>'+(showing_index++)+'. &nbsp;</b> <a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'">'+entry.title+'</a></li>\n');
container.append('<li><a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'">'+'<b>'+(showing_index++)+'. &nbsp;</b>'+entry.title+'</a></li>\n');
}
}
if(first)
{
first = false;
// load the first video
$(".yt-vid-link:first").each(function () {
//$(this).parent().css("background", "red");
$("#red").each(function() { $(this).removeAttr('id'); });
$(this).parent().attr('id', 'red');
loadVideo(this);
return false;
});
$("h3").each(function() {
$(this).remove();
});
}
index += 25;
loadFeed(host_feedUrl, index, showing_index);
}
else
{
// setup the click handler for all the videos
$(".yt-vid-link").click(function () {
//$(this).parent().css("background", "red");
$("#red").each(function() { $(this).removeAttr('id'); });
$(this).parent().attr('id', 'red');
loadVideo(this);
return false;
});
}
});
}
var first = true;
var str = window.location.search;
str = str.replace("?url=", "");
str = str.substr(str.indexOf("?list=")+6);
//alert(str);
//http://www.youtube.com/playlist?list=PLE5C2870574BF4B06
var host_feedUrl = "https://gdata.youtube.com/feeds/api/playlists/" + str + "?start-index=";
loadFeed(host_feedUrl, 1, 1);
});
google.load("feeds", "1");
</script>
</head>
<body>
<div class="videos">
<h3>Please Wait....</h3>
<div id="youtubeVideo">
Insert video here
</div>
<div class="slider">
<ul class="youtubeFeed">
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment