Building a YouTube player with video search API

In this post, we will try to achieve a web page that gets videos from YouTube API, with the help of JQuery and AJAX. The mockup below shows a frame of what our final page will look like.

The full working code is available here at https://github.com/lekansogunle/youtube-player and I will be referring to it from time to time.

1. Open your editor and create folder structure like below, let it include directories js, css, and files js/index.js, css/style.css, index.html
2. Fill your index.html with the following markup;

In the markup, I have added bootstrap, jquery, my styles and index.js script. Also, I have a header reading “My Video Player”, an input to collect the search query from users, and a submit button. Below this I have created two containers to hold the video iframe and the suggested videos as well. The class `embed-responsive embed-responsive-21by9` is provided by bootstrap for embedding iframe videos. It helps with your video aspect ratio. Here I have chosen an aspect ratio of 21by9.

In the div with class `suggest-list` we will be appending other related videos to the page.

3. Create an account with google apis(it is free) then follow the steps here https://developers.google.com/youtube/v3/getting-started#before-you-start to create an API key. This is because you need to authenticate your request with this credential.

4. In your js/index.js add a $(document).ready function. We will write all our code within this function to make sure our DOM is loaded before triggering our extra javascript.

5. Create our search function. This will take whatever input is in the search input and attach it to our api endpoint, make a request to youtube and get back an array of 10 results related to our query string. I have created a function `doSearch` here and you can see the comments above each line giving the details of what is happening. Carefully note the comments above the url describing how the url string is formed and what parameters are required.

6. We then call populateSuggestions() to populate suggestions section with remaining videos from the list of 10 gotten back from our API request.

7. Then we add a click event on the button to call doSearch with whatever input is in the search box.

8. Also, note that I have added a default text value of “planes” so on landing on this page we do a video search on planes. That is why I am calling doSearch() on the last line.

A full working code can be found on https://lekansogunle.github.io/youtube-player/ , and you can try the player out yourself.

To improve the app, I will suggest the following;

1. Try wrap the input and submit button around a form element and make the enter key work when doing a search.
2. Extract the video iframe creator into a separate function that only takes in the videoId.
3. Add some more css to beautify your lovely player.

I believe you must have learnt something or you have a feedback for me, please drop your comment below. Also make a clap, I will appreciate that.