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.
Top comments (0)