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.
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
Step 3
 
Once the project is created, we have to select our project from the dashboard.
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
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.
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
Step 5
 
Once the API is enabled from the left panel, we have to select credentials.
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
Step 6
 
Now one window is open. From that, we have to click on create credentials -> API keys -> copy that API key.
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 

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.
  1. <html>  
  2. <head> <title>Youtube Video search</title>  
  3. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>   
  4. </head>  
  5. <body>   
  6.    <center style="text-align: center;text-transform: uppercase;font-size: 23px;">CodegreekIT Please subscribe if you like this video and share</center>   
  7.    <div class="container">  
  8.    <form id="form">   
  9.       <div class="form-group">  
  10.          <input type="text" class="form-control" id="search">   
  11.       </div>  
  12.       <div class="form-group">   
  13.          <input type="submit" class="btn" value="search" style="color: blueviolet; background-color: aquamarine;">   
  14.       </div>   
  15.    </form>   
  16.    <div class="row">  
  17.       <div class="col-md-12">  
  18.          <div id="videos"></div>   
  19.       </div>   
  20.    </div>  
  21. </div>  
  22. </body>   
  23. </html>  
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
Step 2
 
Now we have to create custom.js. In this file, we have to do some coding for displaying searched data.
  1. jQuery(document).ready(function () {  
  2.     var API_KEY = "AIzaSyDFaNumZ4ZE3hDY-yDQi9VY_WDEYrS3xvo"  
  3.     var video = '';  
  4.     var search = jQuery("#search").val();  
  5.   
  6.     jQuery("form").submit(function (event) {  
  7.         event.preventDefault();  
  8.         videoSearch(API_KEY, search, 10);  
  9.     });  
  10.   
  11.   
  12.     function videoSearch(key, search, maxResults) {  
  13.         var prepand = "learn";  
  14.         jQuery("#videos").empty();  
  15.   
  16.         jQuery.get("https://www.googleapis.com/youtube/v3/search?key=" + key + "&type=video&part=snippet&maxResults=" +  
  17.             maxResults + "&q=" + search,  
  18.             function (data) {  
  19.                 console.log(data);  
  20.                 data.items.forEach(item => {  
  21.                     video = `  
  22.                     <div class="col-md-4"><div class="single-video"><iframe width="100%" height="200"  
  23. src="https://www.youtube.com/embed/${item.id.videoId}" frameborder="5" allowfullscreen >  
  24. </iframe><a href="javascript:void(0);" data-id="${item.id.videoId}" class="fav-add">add to fav</a></div></div>  
  25.   
  26.                 `  
  27.                     console.log(video);  
  28.                     jQuery("#videos").append(video);  
  29.   
  30.                 });  
  31.             })  
  32.     }  
  33. });  
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 
Here is an example result:
 
How To Implement Youtube Video Search Using Youtube Data API V3 In WordPress Website
 

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.  


Similar Articles