Photo by Rachit Tank on Unsplash
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.
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.
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/
$ yarn add youtube-api-search
$ 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.
public/index.html )
<head></head>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" /></head>
Cool, Now we are ready to start writing some react code.
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.development
file 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'
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 ❤ ️.
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.
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.
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.
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.
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.