DEV Community

Cover image for How to use YouTube API in React
Caffeine Code
Caffeine Code

Posted on

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



Enter fullscreen mode Exit fullscreen mode

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>
    );
};


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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

Image description

Image description

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>



Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Image description

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

Image description

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

Image description

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

Top comments (0)