How to fetch feed from YouTube API

Put this script in head of the page

<script type=”text/javascript”>
function showMyVideos(data){
var output =”;
for(var i=0;i < data.feed.entry.length; i++){
var title = data.feed.entry[i].title.$t;
var thumbnail = data.feed.entry[i].media$group.media$thumbnail[0].url;
var id = data.feed.entry[i].id.$t.substring(38);
output += ‘<h3>’ + title + ‘</h3>’;
output += ‘<iframe width=”420″ height=”345″ src=”http://www.youtube.com/embed/’ + id + ‘”></iframe>’;
}
$(‘#videos’).html(output);
}
</script>

Put this video id where you want to show the videos

<div id=”videos”></div>

This script on footer this a callback function
<script¬†¬† type=”text/javascript”
src=”http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos”>
</script>

live example

Leave a Reply

Your email address will not be published. Required fields are marked *