10,933 reads

Make Your Own Youtube player in React using youtube data API v3

by Devyendu ShekharFebruary 12th, 2019

Too Long; Didn't Read

So, in this story, I am going to walk you through the whole journey of how to make your own Youtube Player. It is very easy and I promise you will be ready with your own player within an hour. That’s amazing isn't it? Our end result will look like <a href="http://ytsearch.surge.sh/" target="_blank">this</a>. If you have gone through the link you might have observed a few things. The videos will be fetched directly from the youtube database through the API they have provided. And some of you might have seen the error message like Daily Limit Exceeded. Oops, it means Google has given limited access to this API. So, while creating the project make sure you don’t play too much with the API, otherwise you will have to wait for the next day 😃 for your quota to be recharged. Enough talking. Let’s make a step by step plan. Here is the <a href="https://github.com/dsc712/Youtube-Player-In-React" target="_blank">link </a>for GitHub repository, in case you want to see the code while following along.

Companies Mentioned

featured image - Make Your Own Youtube player in React using youtube data API v3

Photo by Rachit Tank on Unsplash

So What’s the plan? 🤔

So, in this story, I am going to walk you through the whole journey of how to make your own Youtube Player. It is very easy and I promise you will be ready with your own player within an hour. That’s amazing isn't it? Our end result will look like this. If you have gone through the link you might have observed a few things. The videos will be fetched directly from the youtube database through the API they have provided. And some of you might have seen the error message like Daily Limit Exceeded. Oops, it means Google has given limited access to this API. So, while creating the project make sure you don’t play too much with the API, otherwise you will have to wait for the next day 😃 for your quota to be recharged. Enough talking. Let’s make a step by step plan. Here is the link for GitHub repository, in case you want to see the code while following along.

Step by Step planning of the project

First, we will get the API keys from google developers console.
We will start our project using create-react-app by facebook.
We will install the npm package ‘youtube-api-search’.
For UI, we will use the famous React UI library Ant Design by Alibaba.
For responsive iframe, we will use a bit of bootstrap.
Finally, we will code the youtube player.
In the end, we will host our project using surge. An awesome tool for static web publishing for frontend web developers.

Let’s begin some real action 💯

1. Getting the API keys 🔑

First, let us get the API key. Visit this and reach out to your Google developer's dashboard and search for Youtube Data API V3. Enable the API and move to the credentials section, You can see your API key here. You can use it anytime in your project. So we are ready with it.

2. Start Project using create-react-app 😑

npx create-react-app myappcd myappyarn start

That’s it. We have some starter code for our project. As soon as we hit yarn start in the terminal. A development server started and our project got hosted on localhost:3000/

3. Let’s install youtube-api-search in our project

$ yarn add youtube-api-search

4. Add antd React UI library in the project

$ yarn add antd

Now add antd/dist/antd.css at the top of src/App.css

@import ‘~antd/dist/antd.css’;

.App {text-align: center;}

Now we are ready to use ant design in our create-react-app.

5. Add bootstrap CDN in ( `public/index.html )` <head></head>

Cool, Now we are ready to start writing some react code.

6. Let us finally code the Youtube Player 😃

Now let us first add the API key in the .env file. Normally we do that using the dotenv package from npm. But you might be wondering, I haven’t told you to install the dotenv package yet. Actually, this package comes pre-installed with create-react-app. Now there is a special way of adding an environment variable in create-react-app. You have to prefix your environment variable with REACT_APP_ . Otherwise, it won’t work. Also while working on localhost you need .env.developmentfile and for production build .env file will do the work.

So, let us make these two files in the root directory of our project. And add variables like

REACT_APP_API_KEY='your_api_key_jdfe39u3cmijsd'

Planning the Components for our App

With App as the root component, we will need 4 more components SearchBar, VideoDetail, VideoList, and VideoListItem. So make a directory name Components in the src directory of your project.

└── src └── Components

Let’s Fill in these components with some life ❤ ️.

App.js ( Our root Component )

There are a few things to notice in this component. First, the welcome() method. It is used for a welcome notification to the user. I have used the notification component of antd for that. Second**, handleChange() method** applied to the onChange property of SearchBar component. As soon as we start typing something in SearchBar the handleChange() method triggers. That’s what a controlled component is. And from inside of that handleChange() method we are calling the videoSearch() method. Now here comes the use of ‘youtube-api-search’ package. This package returns a function which we can use to make a request to the youtube API. This function accepts an object as the first argument having a key named key, there you need to provide your API key as a value. And, another key named term, which takes up the search term as value.The second argument is a callback. As soon as the request is completed this API returns the data as an array of 5 objects having the details of the video fetched. And in case of daily limit exceeded it returns a different kind of object which I have handled in try/catch block. Here I am maintaining two state variables one being videos containing the array of 5 videos, which will be displayed in VideoList component and another one being selectedVideo which will be played. Also, we have used one more state variable search which is of boolean type. In handleChange() method I have used a couple of setTimeouts to control the number of requests made to our API. It could have been done through react-debounce also. But it is fine as well. That’s all with our root component.

SearchBar.js

Here, I have used the AutoComplete component from antd. And, I am filling this autocomplete component with 5 videos which are coming from API on the basis of the search term. Cool, we are ready with a search bar with autocompletion feature.

VideoList.js

Here, there are two states of our video list, one when the List is empty and other when the list is filled with video suggestions. You can see in the code above, how I handled it.

VideoListItem.js

VideoDetail.js

Here, we have simply used an iframe for playing the youtube video. And used a couple of classes from bootstrap to make it responsive.

And that’s it we are ready with our Youtube player.

Now Hosting with the surge

If you haven’t used the surge before, let me tell you it is the easiest way to deploy your front end applications. Check this out to get started with the surge.

Now how to host create-react-app using surge. First, you will have to create a production build.

$ myapp/ yarn build

This will make an optimized build for you. A build directory will come into the root of your project. Now you can use surge to host your App.

$ myapp/ cd build$ myapp/build/ surge

Hurray 🎉 🎉 🎉 🎉. You have deployed your own youtube player.

If you really liked this story, please clap a few times ( maximum 50 times 😃 ). And for more stories like this follow me.