Skip to content

Instantly share code, notes, and snippets.

@AmmarCodes

AmmarCodes/get-latest-videos.js

Forked from douglasmiranda/get-latest-videos.js
Last active March 20, 2019 17:17
Show Gist options
  • Save AmmarCodes/7749594 to your computer and use it in GitHub Desktop.
Save AmmarCodes/7749594 to your computer and use it in GitHub Desktop.
Download ZIP
Get the latest videos from a YouTube channel with jQuery.
Raw
get-latest-videos.js
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);
// });
}
});
Raw
html-sample-page.html
<!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>
@JackEdwardLyons
Copy link

A little bit of tweaking is required:


function show_my_videos(data) {
	var html = ['<ul id="videos">'];
	$(data.items).each(function(index, item) {
	var desc = item.title,
        videoId  = item.snippet.resourceId.videoId;
		    
    // append HTML
   html.push('<iframe src="https://www.youtube.com/embed/' + videoId  + '?modestbranding=1&amp;rel=0&amp;autoplay=0"></iframe>'); });
	$("#videos").html(html.join(''));
}

var url =
  "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=25&playlistId=PLYjmaSDaONaYjDwr0wLZ62L6_6Sq8-3yc&key={KEY HERE}";

$.ajax({
  url: url,
  dataType: "jsonp",
  success: function(data) {
    console.log(data);
    show_my_videos(data);
		
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment