How to use YouTube API in React
Tags: react, api, webdev, youtubeapi
Published: 2022-06-02 16:26:51

Hello guys, namaste ! Good morning ! I am Vipin Bansal and welcome to the caffeine code.


{% embed https://www.youtube.com/embed/XWePdlCGTno %}


so in this post i am gonna show you , how can you use Youtube api in your react js application and show all videos and playlist.

so first step is to create a new react app. i think you already familiar with create react app 

```
npx create-react-app ytclone

```
 
and now, create a new file in `src` folder. and name it `ytvideos.js` because we use this file to show youtube videos. and create YTvideos function inside this file

```
import react from "react";

export const YTvideos=()=>{
    return(
        <div>
            welcome
        </div>
    );
};
```

so after creating this file, we will import `YTvideos` function in our `app.js` file.

```
import { YTvideos } from "./ytvideos";

function App() {
  return (
    <div className="App">
      <YTvideos/>
    </div>
  );
}

export default App;
```

Now, we will goto youtube and select any video. and click on share button. and a window will popup , where you have to select `Embed link` option. and then copy Iframe code.
You can follow these images.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke4s0vky81wyy347aqii.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obdm9n6e3ysc97ax5eu9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vik86flvoh3wkhl6mcqv.png)

So we had copied `iframe code` of this videos.

```
<iframe width="560" height="315"
 src="https://www.youtube.com/embed/XWePdlCGTno" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

```

Now , we will copy it to our `ytvideos.js` file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7f4olisfc096levcvtqr.png)

so if you run `npm start` at that moment , you will see this as result.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xccvey6qai4tkxhtl95s.png)


Now we forwards for the next step. that is Youtube APi.
For that go on google and search youtube api. and click on first link you see. 
https://developers.google.com/youtube/v3

after going to that url. you will see Youtube Data API window , here you have two options `Add YouTube functionality to your site` and second `Search for content`. You should choose first. after choosing first , Youtube data api overview page will opens.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjetv9d1ti6ve5je4bic.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf47msxqmvc2kual7o8u.png)

and here you can see Introduction and instructions of youtube api before starting.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p301ng9a12aate0rp0wu.png)

now , click on the 2nd instuction blue text url. which will forward you to `Google Developers Console`.
So here you will see a dashboard , and button which is named `Enable APi and services`. After clicking on that , a search box will appear. now search `youtube api` in that search box.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/179a2vc589gjnja8jovk.png)