Upload & takes control over the Youtube Data API
Tags: youtubedataapi, tutorial, javascript, webdev
Published: 2020-04-27 08:55:03


Using Youtube Data API we can access YouTube features to our application, including the ability to upload videos, create and manage playlists, and more.

As a Developer, we need to handle third party API or custom own API. There is no developer who is not integrated any single API in her development journey. So let me introduce API with you. What is actually API is. API is basically Application Programming Interfaces.

## 🔰 Bit of information about API

If I make it simple then it's a common guideline, which way two software can talk to each other. Let’s break,

-📗 Application:- is a service app or could be a third-party open data portal. (Eg. Youtube, Google Map, etc)
-📗 Interface:- It's like a medium, which has some common definitions or formats. (Eg. JSON, XML or Other light-weight file format). JSON is a common and widely used format.
-📗 And finally, Program:- is a set of codes that the developer writes to develop the application. (Eg. Youtube Data API Codes)

I hope you guys get an idea about API if you want to know more about it. Then look below references.


- [Read Wikipedia](https://en.wikipedia.org/wiki/Application_programming_interface)
- [Read FreecodeCamp](https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82)



## 🔰 Setting up your API-Key or Pre-configuration.

As I mentioned two systems talk to each other. So one issue raises, that is Security! so that we can take over the control of application resources. API's could be open or close via API-key. We need to configure API-key for close application resources. Okay, let's setup api-key for Youtube Data API.


## 🔰 Setup Youtube Data API Congifuraiton 


-[1] Visit, and [Enable Youtube Data API](https://console.developers.google.com/apis/dashboard)
-[2] If not exist then **Create New Project**
-[3] Search For API **Youtube Data API**, Enable It.
-[4] Then Left Menu Click **Credentials**.
-[5] Create **API Keys**, Select **none** then **Restrict key** radio and choose **Youtube Data API** from Dropdown.
-[6] And Finally, From **Credentials** create **OAuth 2.0 Client IDs** with **Authorized JavaScript origins** Urls [http://localhost] and [http://localhost:5000] or [https://custom-appserver-domain.com]
-[7] Replace **js/YoutubeDataApi.js** file **CLIENT_KEY** and **API_KEY**. 
-[8] Now run the app using **live server** or deploy its production server. [I used VScode life server Extension]

Note: Origins must me match as defined as **OAuth2.0 client** console.
Details guide will be found. [Guide](https://developers.google.com/youtube/v3/getting-started). Else Occurre authentication-related error. 


## 🔰 I have attached a demo sample **source code** below,

- [Sample Project Source Code](https://github.com/mesadhan/youtube-data-api-v3-example)

## 🔰 Finally, Run & Test Application
-📗 Clone Project from GitHub and then move on
-📗 After run application using live server
-📗 Login with Gmail account and accept require permission
-📗 Finally, Navigate Button and test.



>I'm sorry I can't get enough time to optimize its example code. If anyone interested to work with this project then feels free to knock me. I came to share this example because I didn't found any complete tutorial on it. So I think it might be helpful for others.

👌 Congratulations. & Thanks for your time & passion. Feel free to comments, If you have any issues & queries. [Follow me on Twitter ](https://twitter.com/eng_sadhan)


## 🔰 References:
- https://developers.google.com/youtube/v3/getting-started
- https://console.developers.google.com/apis/library/youtube.googleapis.com

- https://console.developers.google.com/apis/credentials