Get The Latest Video Of A YouTube Channel Using jQuery

Sabyasachi Mishra

jQuery Google DevelopmentYouTube channelYouTube Channel Latest Video

17 Comments

Join the conversation! Your thoughts help the community grow.

Scott MacKenzie9y ago
Good example, i noticed you rely on the legacy username. Now youtube use IDs and custom urls. Can you advise on the changes for these?
Akanksha Singh10y ago
I am not getting, from where ill get playlist id..its always giving me error (404 not found)
Subash10y ago
Nice
Anu V11y ago
thanks sir
Jayant Tripathy11y ago
Could you please guide in other way how to show all videos that i uploded into website.suppose i upload 10 videos then that video automnatically fetch into the website. I am tried for creatting channel but according to you tube there is new rule for channel custom url that must subscribe 100 n more also some condition that not satisfy for the time.
- Sabyasachi Mishra11y ago
  For all video from youtube channel I have used YoutubeAPIv3 not this one. I have used a button on its click I am fetching all the video's from youtube channel and showing them in iframe.I have referred this link for dotnet and it worked for me https://developers.google.com/youtube/v3/code_samples/dotnet If you still didn't able to make let me know I will provide my one with some changes
Jayant Tripathy11y ago
Hi I have some issues. I create the API key then how to create channel name like (mpltain) and part (snippet) then what use of Uploads key UUl23mvQ3321L7zO6JyzhVmg .please reply back me quckly. i am half one the way
- Sabyasachi Mishra11y ago
  I am not creating any channel I am just displaying videos of (mpltain) channel.
- Sabyasachi Mishra11y ago
  Click on Try now or visit this link to add your channel name in the forms https://developers.google.com/youtube/v3/docs/channels/list#try-it
Ajeet Mishra11y ago
nice
Sabyasachi Mishra11y ago
Thanks everyone for your appreciation.If you have gone through details you could have seen it is only giving top 50 latest video on the basis latest upload. Recently I completed how to fetch all the videos. I will share it very soon.
Nilesh Jadav11y ago
great info thanks for sharing
Humayun Kabir Mamun11y ago
Nice...
Ankit Bansal11y ago
Nice .. thanks for sharing..
Santhakumar Munuswamy11y ago
Good article
Shridhar Sharma11y ago
nice share
Pankaj Kumar Choudhary11y ago
Nice Explain Sir.......

Introduction

This is one of the social media implementation for a website. Here we are fetching latest video from a particular YouTube channel and showing in our website using simple HTML and jQuery.

Description

We need to follow the following steps for implementing this application for our website.

Design HTML Page

Here I have used simple HTML design as follows along with some styles in style.css with some JS:

<head runat="server">
<title>YouTube Videos List</title>
<link href="CSS/style.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="JavaScript/Script.js"></script>
</head>
<body>
<div id="container">
<h1>You tube vidoes</h1>
<ol id="result">
</ol>
</div>
</body>

Style.css

body {
background: #f4f4f4;
font-family: Arial,sans-serif;
font-size: 14px;
color: #666;
}
#container {
width: 800px;
height: auto;
overflow: auto;
background: #fff;
padding: 15px;
}

Now at this point the design has been completed. Now we have to integrate a YouTube Channel to this HTML and append inside <ol></ol> tags.

Now before moving forward we should have a Google Developer account (e.g. any Google account).

Visit to this URL . And it will come up like the following image.

create project

Now click on Create Project giving a project name and click Create. After this do as per the following image and follow the instructions.

After completing this a popup window will come and then click Browser key. Now give a name and click Create. After this you will get your API key by which you are going to get latest videos from a particular YouTube channel.

While fetching all the details of a particular channel we need to know the Channel Name.

How to Find Channel Name?

See I am a dye heart fan of Mumbai-Indians. Go to YouTube.com search Mumbai Indians as in the following image:

Youtube

You can see the 1st one is the channel as it has been written. Click on it you will get a URL as https://www.youtube.com/user/mipaltan.

Here mipaltan is the channel name. You can take any of your preferred channel name in this process.

Now every channel has a list of Playlist and every Playlist has a list of videos.

For detailed documentation follow this link.

At the end of this link you will get a form.

From the form fill some of the fields as in the following image:

Then click Execute without OAuth then you will get a success message with some response. Now take the Uploads key UUl23mvQ3321L7zO6JyzhVmg as per my result.

Now go to the link.

At the end of the docs you will find the form as in the following image.

Then click Execute without OAuth then you will get a success message with all the videos from the channel and all the details in JSON format. Now we have to write our own jQuery using this to show in our web page.

You have seen I have a JavaScript file Script.js.

The code is as follows. Follow the comments for better understanding.

var channelName = 'mipaltan';
var vidHeight = 400;
var vidWidth = 500;
var vidMaxResult = 20; // Maximum can be 50
$(document).ready(function () {
$.get("https://www.googleapis.com/youtube/v3/channels", {
part: 'contentDetails',
forUsername: channelName,
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key
},
function (data) {
$.each(data.items, function (i, item) {
console.log(item); // See in Browser Console
pid = item.contentDetails.relatedPlaylists.uploads;
getVideos(pid);
})
}
);
function getVideos(pid)
{
$.get("https://www.googleapis.com/youtube/v3/playlistItems", {
part: 'snippet',
maxResults: vidMaxResult,
playlistId:pid,
key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key
},
function (data) {
var outputVideo;
$.each(data.items, function (i, item) {
console.log(item); // See in Browser Console
vidId = item.snippet.resourceId.videoId;
outputVideo = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + vidId + '"> </iframe></li>';
//Append to result list
$('#result').append(outputVideo);
})
}
);
}
});

Now if you run this you will see a list of top 20 videos in your page.

Note

This has been developed as per YouTube Data API V3. It may not work if YouTube changes its version latter.
Don't share your API key with others.
You can download the attached project and can see the result.

To get all the videos of a YouTube channel using C# find the attached link.

Hope that helps you.

Please add comments if you find any difficulty while building this application.