How To Implement A Youtube Video Search Using Youtube Data API V3 In A WordPress Website

Introduction

This article is an introduction of how to integrate Youtube Data API v3 for a Youtube video search.

What is Youtube Data API v3?

The YouTube Data API v3 is an API that provides access to YouTube data, such as videos, playlists, and channels. Using YouTube Data API v3, you can add a variety of YouTube features to your application or website you can use the API to upload videos, fetch the video, manage playlists and subscriptions, update channel settings and much more. YouTube Data API v3 to search for videos matching specific search terms, topics, locations, publication dates, and much more. The APIs search.list method also supports searches for playlists and channels.

How to Integrate Youtube Data API v3 in WordPress?

Let's start with the following steps.

Step 1

First, we have to open Google Cloud Console -> Then we have to click on Select a project

How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website

Step 2

From the right side, we have to click on a new project. Once you click on it, a window opens. In this, we have to enter the project name then click on the create button.

Step 3

Once the project is created, we have to select our project from the dashboard.

Step 4

From the dashboard, we have to search “Youtube Data API v3” in the search bar and click on the enable button to enable the API.

Step 5

Once the API is enabled from the left panel, we have to select credentials.

Step 6

Now one window is open. From that, we have to click on create credentials -> API keys -> copy that API key.

Let's integrate all these things in WordPress.

Step 1

We have to create a custom template. In this template we have to design our search video UI.

<html>
<head> <title>Youtube Video search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
</head>
<body>
<center style="text-align: center;text-transform: uppercase;font-size: 23px;">CodegreekIT Please subscribe if you like this video and share</center>
<div class="container">
<form id="form">
<div class="form-group">
<input type="text" class="form-control" id="search">
</div>
<div class="form-group">
<input type="submit" class="btn" value="search" style="color: blueviolet; background-color: aquamarine;">
</div>
</form>
<div class="row">
<div class="col-md-12">
<div id="videos"></div>
</div>
</div>
</div>
</body>
</html>

Step 2

Now we have to create custom.js. In this file, we have to do some coding for displaying searched data.

jQuery(document).ready(function () {
var API_KEY = "AIzaSyDFaNumZ4ZE3hDY-yDQi9VY_WDEYrS3xvo"
var video = '';
var search = jQuery("#search").val();
jQuery("form").submit(function (event) {
event.preventDefault();
videoSearch(API_KEY, search, 10);
});
function videoSearch(key, search, maxResults) {
var prepand = "learn";
jQuery("#videos").empty();
jQuery.get("https://www.googleapis.com/youtube/v3/search?key=" + key + "&type=video&part=snippet&maxResults=" +
maxResults + "&q=" + search,
function (data) {
console.log(data);
data.items.forEach(item => {
video = `
<div class="col-md-4"><div class="single-video"><iframe width="100%" height="200"
src="https://www.youtube.com/embed/${item.id.videoId}" frameborder="5" allowfullscreen >
</iframe><a href="javascript:void(0);" data-id="${item.id.videoId}" class="fav-add">add to fav</a></div></div>
`
console.log(video);
jQuery("#videos").append(video);
});
})
}
});

Here is an example result:

Summary

In this article, we learned how to integrate Youtube Data API v3.

I hope that you found this tutorial easy to follow and understand.