Post
Ask Question

Get The Latest Video Of A YouTube Channel Using jQuery

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:
  1. <head runat="server">  
  2.     <title>YouTube Videos List</title>  
  3.     <link href="CSS/style.css" rel="stylesheet" />  
  4.     <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  
  5.     <script src="JavaScript/Script.js"></script>  
  6. </head>  
  7. <body>  
  8.     <div id="container">  
  9.         <h1>You tube vidoes</h1>  
  10.         <ol id="result">  
  11.         </ol>  
  12.     </div>  
  13. </body> 
Style.css
  1. body {  
  2.     background: #f4f4f4;  
  3.     font-family: Arial,sans-serif;  
  4.     font-size: 14px;  
  5.     color: #666;  
  6. }  
  7. #container {  
  8.     width: 800px;  
  9.     height: auto;  
  10.     overflow: auto;  
  11.     background: #fff;  
  12.     padding: 15px;  
  13. } 
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.
  1. var channelName = 'mipaltan';  
  2. var vidHeight = 400;  
  3. var vidWidth = 500;  
  4. var vidMaxResult = 20; // Maximum can be 50
  5.   
  6. $(document).ready(function () {  
  7.     $.get("https://www.googleapis.com/youtube/v3/channels", {  
  8.         part: 'contentDetails',  
  9.         forUsername: channelName,  
  10.         key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key  
  11.     },  
  12.         function (data) {  
  13.             $.each(data.items, function (i, item) {  
  14.                 console.log(item); // See in Browser Console  
  15.                 pid = item.contentDetails.relatedPlaylists.uploads;  
  16.                 getVideos(pid);  
  17.             })  
  18.         }  
  19.         );  
  20.     function getVideos(pid)  
  21.     {  
  22.         $.get("https://www.googleapis.com/youtube/v3/playlistItems", {  
  23.             part: 'snippet',  
  24.             maxResults: vidMaxResult,  
  25.             playlistId:pid,  
  26.             key: 'AIzaSyCT8kXaxJ2l29vYg4HBdYy36H-PhAH-Teg' //Browser API Key  
  27.         },  
  28.        function (data) {  
  29.            var outputVideo;  
  30.            $.each(data.items, function (i, item) {  
  31.                console.log(item); // See in Browser Console  
  32.                vidId = item.snippet.resourceId.videoId;  
  33.                outputVideo = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src=\"//www.youtube.com/embed/' + vidId + '"> </iframe></li>';  
  34.   
  35.                //Append to result list  
  36.                $('#result').append(outputVideo);  
  37.            })  
  38.        }  
  39.        );  
  40.     }  
  41. }); 
Now if you run this you will see a list of top 20 videos in your page.

Note
  1. This has been developed as per YouTube Data API V3. It may not work if YouTube changes its version latter.
  2. Don't share your API key with others.
  3. 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.


Similar Articles