public
Last active

Insert YouTube Channel Feed & Player into any site using JSON

  • Download Gist
insertyoutubefeed
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
 
<style>
#videogroup {
width: 100%;
}
 
iframe {
width: 90%;
padding: 5%;
}
 
#myplayer .first iframe {
width: 100%;
padding: 0;
}
#videolist ul {
margin: 0;
padding: 0;
list-style: none;
}
 
#videolist li {
width: 50%;
float: left;
border: none;
position: relative;
}
 
#videolist li .entriestitle {
padding: 0 5px;
position: absolute;
left:80%;
top:20%;
display: none;
}
#videolist li:hover .entriestitle {
display: block;
width: 100%;
background: rgb(119, 25, 51);
border-radius: 10px;
color: #FFF;
padding: 10px;
opacity: .9;
z-index: 100;
right: 0;
}
 
</style>
 
<script type="text/javascript">
 
function listVideos(data) {
var firstOutput="";
var entries = data.feed.entry;
var myOutput = '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
var entriesID=entries[i].id.$t.substring(38);
var entriesTitle=entries[i].title.$t;
var entriesDescription=entries[i].media$group.media$description.$t;
var entriesThumbnail=entries[i].media$group.media$thumbnail[0].url;
myOutput += '<li><div class="entriestitle">' + entriesTitle + '</div>';
myOutput+='<iframe src="http://www.youtube.com/embed/'+entriesID+'?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;fs=1&amp;autoplay="0" frameborder="0" allowfullscreen></iframe>';
if (i==0) {
firstOutput += '<div class="first">';
firstOutput += '<h2>' + entriesTitle + '</h2>';
firstOutput += '<iframe src="http://www.youtube.com/embed/'+entriesID+'?wmode=transparent&amp;HD=0&amp;rel=0&amp;showinfo=0&amp;controls=1&amp;autoplay="0" frameborder="0" allowfullscreen></iframe>';
firstOutput += '<p>' + entriesDescription + '</p>';
firstOutput += '</div>';
document.getElementById('myplayer').innerHTML=firstOutput;
}
}
document.getElementById('videolist').innerHTML = myOutput;
myOutput +='</ul>';
}
</script>
 
<div id="videogroup">
<div id="myplayer"></div>
<div id="videolist"></div>
</div>
 
<script type="text/javascript" src="http://gdata.youtube.com/feeds/users/lynda/uploads?alt=json-in-script&callback=listVideos&max-results=6&category=Villalobos"></script>

This gist lets you read a YouTube stream of video from a channel and place it on your site as a series of playable thumbnails.

You can include it in a sidebar widget in WordPress pretty easily. Just copy the code, then add a text widget in WordPress and paste the code. You might have to tweak your CSS a bit.

For right now, it will load the latest videos from the Lynda.com com channel that are tagged with my last name "Villalobos". To customize, simply change the name of the channel (right now lynda), how many videos you want (results=). The category is optional. One note is that the category will also work with tags. So if you're looking to view by tag or category, just feed the name under the category id.

Has anyone tried out this Yunero plugin .. shows video feeds for any channel or playlist with subscriptions

check out if interested-
http://www.codehandling.com/2013/02/yunero-jquery-plugin-displays-video.html

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.