Create YouTube Video Search Engine with jQuery

Last updated Jul 9, 2019

This code snippet I found on codepen and found it interesting so sharing it with my readers, It’s a simple jQuery script help you to search videos on YouTube you can search any video on YouTube publicly available. It’s a very simple and easy to configure jQuery snippet let’s make YouTube search engine site with jQuery.

DEMO
First of all you need to create Google Project to get API Key.

Click here to create project.

Select Project.

Search YouTube data API Service and enable it.

Now Generate API Key.

Finaly we got API Key now move to Coding.

Include some files like jQuery, Bootstrap, FancyBox and some scripts.

HTML Search Form:

<h2>YouTube Search Engine</h2>

</button>

</span>

</form>

</div>

</div>

Above HTML show search form and results and buttons div.

Now Add JavaScript Main code: ADD_YOUR_API_KEY_HERE replace your API Key with this.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

var gapikey = ‘ADD_YOUR_API_KEY_HERE’;

$(function() {

// call fancybox pluggin

$(“.fancyboxIframe”).fancybox({

maxWidth : 900,

maxHeight : 600,

fitToView : false,

width : ‘90%’,

height : ‘90%’,

autoSize : false,

closeClick : false,

openEffect : ‘none’,

closeEffect : ‘none’,

iframe: {

scrolling : ‘auto’,

preload : true

}

});

$(‘#search-form’).submit( function(e) {

e.preventDefault();

});

function searchYoutube() {

$(‘#results’).html(‘<i class=”fa fa-spinner fa-pulse fa-3x fa-fw”></i><span class=”sr-only”>Loading…</span>’);

$(‘#buttons’).html(”);

// get form input

q = $(‘#search’).val();

// run get request on API

$.get(

“https://www.googleapis.com/youtube/v3/search”, {

part: ‘snippet, id’,

q: q,

type: ‘video’,

key: gapikey

}, function(data) {

var nextPageToken = data.nextPageToken;

var prevPageToken = data.prevPageToken;

// Log data

console.log(data);

$(‘#results’).html(”); // hide loading

$.each(data.items, function(i, item) {

// Get Output

var output = getOutput(item);

// display results

$(‘#results’).append(output);

});

var buttons = getButtons(prevPageToken, nextPageToken);

// Display buttons

$(‘#buttons’).append(buttons);

});

}

// Next page function

function nextPage() {

var token = $(‘#next-button’).data(‘token’);

var q = $(‘#next-button’).data(‘query’);

// clear

$(‘#results’).html(‘<i class=”fa fa-spinner fa-pulse fa-3x fa-fw”></i><span class=”sr-only”>Loading…</span>’);

$(‘#buttons’).html(”);

// get form input

q = $(‘#search’).val();

// run get request on API

$.get(

“https://www.googleapis.com/youtube/v3/search”, {

part: ‘snippet, id’,

q: q,

pageToken: token,

type: ‘video’,

key: gapikey

}, function(data) {

var nextPageToken = data.nextPageToken;

var prevPageToken = data.prevPageToken;

// Log data

console.log(data);

$(‘#results’).html(”);

$.each(data.items, function(i, item) {

// Get Output

var output = getOutput(item);

// display results

$(‘#results’).append(output);

});

var buttons = getButtons(prevPageToken, nextPageToken);

// Display buttons

$(‘#buttons’).append(buttons);

});

}

// Previous page function

function prevPage() {

var token = $(‘#prev-button’).data(‘token’);

var q = $(‘#prev-button’).data(‘query’);

// clear

$(‘#results’).html(‘<i class=”fa fa-spinner fa-pulse fa-3x fa-fw”></i><span class=”sr-only”>Loading…</span>’);

$(‘#buttons’).html(”);

// get form input

q = $(‘#search’).val(); // this probably shouldn’t be created as a global

// run get request on API

$.get(

“https://www.googleapis.com/youtube/v3/search”, {

part: ‘snippet, id’,

q: q,

pageToken: token,

type: ‘video’,

key: gapikey

}, function(data) {

var nextPageToken = data.nextPageToken;

var prevPageToken = data.prevPageToken;

// Log data

console.log(data);

$(‘#results’).html(”);

$.each(data.items, function(i, item) {

// Get Output

var output = getOutput(item);

// display results

$(‘#results’).append(output);

});

var buttons = getButtons(prevPageToken, nextPageToken);

// Display buttons

$(‘#buttons’).append(buttons);

});

}

// Build output

function getOutput(item) {

var videoID = item.id.videoId;

var title = item.snippet.title;

var description = item.snippet.description;

var thumb = item.snippet.thumbnails.high.url;

var channelTitle = item.snippet.channelTitle;

var videoDate = item.snippet.publishedAt;

// Build output string

var output = ‘<div class=”col-md-6″>’ +

‘<img src=”‘ + thumb + ‘” class=”img-responsive thumbnail” >’ +

‘</div>’ +

‘<div class=”input-group col-md-6″>’ +

‘<h3><a data-fancybox-type=”iframe” class=”fancyboxIframe” href=”http://youtube.com/embed/’ + videoID + ‘?rel=0″>’ + title + ‘</a></h3>’ +

‘<small>By <span class=”channel”>’ + channelTitle + ‘</span> on ‘ + videoDate + ‘</small>’ +

‘<p>’ + description + ‘</p>’ +

‘</div>’ +

‘<div class=”clearfix”></div>’;

return output;

}

function getButtons(prevPageToken, nextPageToken) {

if(!prevPageToken) {

var btnoutput = ‘<ul class=”pagination”>’ +

‘<li><a href=”javascript:;” id=”next-button” class=”paging-button” data-token=”‘ + nextPageToken + ‘” data-query=”‘ + q + ‘”‘ +

‘onclick = “nextPage();”>Next »</a></li>’ +

‘</ul>’;

} else {

var btnoutput = ‘<ul class=”pagination”>’ +

‘<li><a href=”javascript:;” id=”prev-button” class=”paging-button” data-token=”‘ + prevPageToken + ‘” data-query=”‘ + q + ‘”‘ +

‘onclick = “prevPage();”>« Previous</a></li>’ +

‘<li><a href=”javascript:;” id=”next-button” class=”paging-button” data-token=”‘ + nextPageToken + ‘” data-query=”‘ + q + ‘”‘ +

‘onclick = “nextPage();”>Next »</a></li>’ +

‘</ul>’;

}

return btnoutput;

}

Above JavaScript do all works Request API’s and fetch data from YouTube ADD_YOUR_API_KEY_HERE replace your API Key.

searchYoutube() This function search all videos for given key

nextPage() Show next page of current result

prevPage() Show previous page of current result

getOutput(item) this function generate output data on given values.

getButtons(prevPageToken, nextPageToken) create buttons next and previous

Some CSS styles to make output looks good:

#custom-search-input{

padding: 3px;

border: solid 1px #E4E4E4;

border-radius: 6px;

background-color: #fff;

}

#custom-search-input input{

border: 0;

box-shadow: none;

width: 93%;

}

#custom-search-input button{

margin: 2px 0 0 0;

background: none;

box-shadow: none;

border: 0;

color: #666666;

padding: 0 8px 0 10px;

border-left: solid 1px #ccc;

}

#custom-search-input button:hover{

border: 0;

box-shadow: none;

border-left: solid 1px #ccc;

}

#custom-search-input .glyphicon-search{

font-size: 23px;

}

article {

margin: 10px 0;

background: rgba(0,0,0,0.7);

padding: 4px 20px;

}

.video-wrapper {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

z-index:-1;

}

.video-wrapper video {

position: fixed;

top: 0;

right: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

}

.content {

position: relative;

margin: 60px auto;

width: 80%;

max-width: 640px;

z-index: 1;

}

.clearfix{

border-bottom: 1px dotted #ccc;

margin-bottom: 5px;

}

This CSS will add some beautification to results and search form.

That’s all.

I hope you like this tutorial plese share your feedback in comments and if you face any issue please comment below.

Create YouTube Video Create YouTube Video Search Engine Video Search Engine