Skip to content

Instantly share code, notes, and snippets.

@TianRB
Forked from AmmarCodes/get-latest-videos.js
Created March 20, 2019 17:17
Show Gist options
  • Save TianRB/e24f024a42c2c8cd94a8f113e06ed23d to your computer and use it in GitHub Desktop.
Save TianRB/e24f024a42c2c8cd94a8f113e06ed23d to your computer and use it in GitHub Desktop.
Get the latest videos from a YouTube channel with jQuery.
function show_my_videos(data){
html = ['<ul id="videos">'];
$(data.data.items).each(function(item) {
id = item.id;
description = item.title;
html.push('<iframe width="560" height="315" src="//www.youtube.com/embed/'+ id +'" frameborder="0" allowfullscreen></iframe>');
});
$("#videos").html(html.join(''));
}
// Replace [YOUTUBE_CHANNEL] with the channel you want
// Change max-results to the number of videos you want to display
$.ajax({
type: "GET",
url: "https://gdata.youtube.com/feeds/api/users/[YOUTUBE_CHANNEL]/uploads?max-results=1&orderby=published&v=2&alt=jsonc",
cache: false,
dataType:'jsonp',
success: function(data){
show_my_videos(data);
//If you want to see in console...
// console.log(data);
// console.log(data.data.items);
// });
}
});
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Latest Youtube Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="get-latest-videos.js"></script>
</head>
<body>
<div id="videos"> <!-- here will be loaded your videos --> </div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment