Sunday, June 8, 2014

Loading a YouTube Channel as a Feed

For a few projects now, it has become necessary to cross-integrate as many items as possible. One example, would be showing a YouTube channel in feed style within a given web site. The usefulness is that videos can be posted to the targeted channel via a smartphone and or other computer on the fly and be available on both the YouTube channel and the targeted website (The feed coming off Google generaly takes about fifteen minutes).Additionally, this can allow for easy uploading from multiple persons, while offloading the security aspects onto Google. 
  • The "html.push" can be tweaked to the desired layout, which will be injected into the "youtube" div tag, following the script. 
  • With the ajax section, the "url" attribute needs to be adjusted to match the desired YouTube channel.The only variable within the url is the YouTube user id, which can be verified using Google's instructions here.
Here's the full code to make it all happen! 

<script type="text/javascript">
function show_my_videos(data){
html = ['<ul id="youtube-videos" style="list-style-type:none">'];
$(data.feed.entry).each(function(entry){
url = this.link[0].href;
url_thumbnail = this.media$group.media$thumbnail[3].url;
var description;
try
{
description = this.media$group.media$description.$t;
}
catch(err)
{
description = '';
}
html.push('<li><table style="width:250px;"><tr><td colspan=2></td></tr><tr><td style="vertical-align:top"><a href="'+url+'" target="_blank">');
html.push('<img src="'+url_thumbnail+'" alt="'+description+'" style="border:1px white solid">');
html.push('</a></td><td style="font-size:8pt">'+description+'</td></tr><tr><td colspan=2 style="border-bottom:1px white solid">&nbsp;</td></tr></table></li>');
});
html.push('</ul>');
$("#youtube").html(html.join(''));
}
$.ajax({
type: "GET",
url: "http://gdata.youtube.com/feeds/api/users/[YouTube User ID]/uploads?alt=json-in-script&format=5",
cache: false,
dataType:'jsonp',
success: function(data){
show_my_videos(data);
  }
});

</script>

<div id="youtube" style=""></div>


Example, as rendered in page:

No comments:

Post a Comment