(For more resources related to this topic, see here.)

Introduction to the YouTube API

YouTube provides three different APIs for a client application to access. The following figure shows the three different APIs provided by YouTube:

Configuring a YouTube API

In the Google Developers Console, we need to create a client project. We will be creating a new project, called PacktYoutubeapi. The URL for the Google Developers Console is https://console.developers.google.com.

The following screenshot shows the pop-up window that appears when you want to create a new client project in the Developers Console:

After the successful creation of the new client project, it will be available in the Console's project list. The following screenshot shows our new client project listed in the Developers Console:

There is an option available to enable access to the YouTube API for our application. The following screenshot shows the YouTube API listed in the Developers Console. By default, the status of this API is OFF for the application.

To enable this API for our application, we need to toggle the STATUS button to ON. The following screenshot shows the status of the YouTube API, which is ON for our application:

To access YouTube API methods, we need to create an API key for our client application. You can find the option to create a public API key in the APIs & auth section. The following screenshot shows the Credentials subsection where you can create an API key:

In the preceding screenshot, you can see a button to create a new API key. After clicking on this button, it provides some choices to create an API key, and after the successful creation of an API key, the key will be listed in the Credentials section. The following screenshot shows the API key generated for our application:

Searching for a YouTube video

In this section, we will learn about integrating a YouTube-related search video. YouTube Data API Version 3.0 is the new API to access YouTube data. It requires the API key that has been created in the previous section.

The main steps that we have to follow to do a YouTube search are:

1. After adding the YouTube Search button, click on it to trigger the search process.
Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime
START FREE TRIAL
2. The script reads the data-booktitle attribute to get the title. This will serve as a keyword for the search. Check the following screenshot for the HTML markup showing the data-booktitle attribute:

   

3. Then, it creates an AJAX request to make an asynchronous call to the YouTube API, and returns a promise object.
4. After the successful completion of the AJAX call, the promise object is resolved successfully.
5. Once the data is available, we fetch the jQuery template for the search results and compile it with a script function. We then link it to the search data returned by the AJAX call and generate the HTML markup for rendering.

   

The base URL for the YouTube search is through a secure HTTP protocol, https://www.googleapis.com/youtube/v3/search. It takes different parameters as input for the search and filter criteria. Some of the important parameters are field and part.

The part parameter

The part parameter is about accessing a resource from a YouTube API. It really helps the application to choose resource components that your application actually uses. The following figure shows some of the resource components:

The fields parameter

The fields parameter is used to filter out the exact fields that are needed by the client application. This is really helpful to reduce the size of the response.

For example, fields = items(id, snippet(title)) will result in a small footprint of a response containing an ID and a title.

The YouTube button markup

We have added a button in our jQuery product template to display the search option in the product. The following code shows the updated template:

<script id="aProductTemplate" type="text/x-jquery-tmpl">
<div class="ts-product panel panel-default">
<div class="panel-head">
<div class="fb-like" data-href="${url}" datalayout="
button_count"
data-action="like" data-show-faces="true" datashare="
true"> </div> </div> <div class="panel-body">
<span class="glyphicon glyphicon-certificate ts-costicon">
<label>${cost}$</label>
</span>
<img class="img-responsive" src ="${url}">
<h5>${title}</h5>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-danger btn-block
packt-youtube-button" data-bookTitle="${title}">YouTube Search</
button>
<button type="button" class="btn btn-info btn-block">Buy</
button>
<button type="button" class="btn btn-info btn-block twitme"
data-bookTitle="${title}" data-imgURI="${url}">Tweet</button>
<div class="g-plus-button">
<div class="g-plusone" data-width="180" datahref="${
url}"></div>
</div>
</div>
</div>
</script>

The following screenshot shows the updated product markup with a YouTube button added to the product template: