How to use YouTube API in React

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

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.

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.

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

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.

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

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.