Welcome folks I am back with another blog post. In this post we will be making a Complete Youtube Playlist Search Application from Scratch in Javascript using the Youtube Data API V3. For this application we first of all need to create a project in Google Developers Console and get your client id and client secret. This process is illustrated in the next steps in a detailed fashion.

So just create a new project by providing a certain name or you can select from the created projects.

After selecting the project just click on create credentials and create a brand new OAuth Client ID.

Just select the option of web application because we are creating a web application which interacts with the Google Drive API.

So in this just provide localhost for the first field and the second field is important it needs to be the same for your project you can have different redirect url. It is basically the url to which Google redirects you whenever the user grants access to your application. Select it cautiously it needs to be same for your project.

Click on the create button to generate the client id and client secret. It will be different for you and don’t share this with others. Just copy both and store it somewhere we will be using it later in the application.

After that create your project and inside your project create a brand new index.html file which will hold a simple button. For this project we are using XAMMP for local server.

After that create a new file main.js which will hold the logic for index.html. In this file we will redirect the user to the permissions page where users can grant access to your application.

The whole source code is full of comments and it is self explanatory we are using jQuery and also just replace the client id , redirect_uri with your values respectively. When you save this and execute this you will getting this output as shown below.

As you can see that whenever you execute this you will be redirected to the screen where you want to select your google account from this list of accounts and after that it grants access to your account by allowing this you will be granting access to this application. If you redirect_uri is different from the one you have mentioned in the Google Developers Console. You will getting this error of redirect_uri.

After that create a brand new file called as redirect.html which will be the actual redirect_uri to which the user will land after allowing access to the application. Just create a new file redirect.html and copy paste the code. 

You can see that there is three fields along with the buttons respectively of searching Youtube Playlists by id, username and also you can search the playlist. And when you launch the application it will automatically list all your youtube channel playlists. 

Just create a new redirect.js file to create the logic whenever the user opens the application it will grab the user’s channel playlist and display them in a list view. First of all we will exchange the authorization code which is generated in the previous step with the access token. Access token are generally the medium from which we will making the requests to the API.

You can see that when you launch the app your playlist will automatically be shown to you and also you can see the json response which comes from the API. Apart from this you also have the option to search playlist by id, username and also you have the option to to search playlist by keyword. You can see the figure of the application as shown below. 

First of all in order to fetch Youtube Playlist by id you have to copy paste the channel id as shown below and then paste in the application.

You can see that we have copy pasted the channel id in the search and then click the submit button. You will see the playlist of that particular channel. 

You can see that the playlist are shown in the list view. You also have the option of going to the playlist from the application as shown below.

We can also search the playlist by youtube channel username. We can find the youtube channel username as shown below and copy paste in the application.

We can also search the Youtube Playlist by entering any keyword as shown below.

Congratulations we are done making a Complete Youtube Playlist Search Application from Scratch in Javascript using the Youtube Data API V3 from scratch. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.

A programmer scientist by the mind and a passionate blogger by heart ❤️. Fountainhead of Coding Shiksha Life motto: Live while you can! Teach & inspire while you could & Smile while you have the teeth.

Gautam Sharma

Founder , Coding Shiksha

0 Comments

Submit a Comment

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

Summary
Youtube Playlist Search Application in Javascript using Youtube Data API
Article Name
Youtube Playlist Search Application in Javascript using Youtube Data API
Description
In this post we will be building complete youtube playlist search application in javascript using youtube data api v3
Author
Publisher Name
Coding Shiksha
Publisher Logo