playground.mobily.pl - marcin dziewulski - How to create your own YouTube search engine

mobily.pl - marcin dziewulski - playground

Check out the new website with fresh and new jQuery plugins and tutorials!
Visit jscraft.net

How to create your own YouTube search engine

Posted by: Marcin Dziewulski on 31.01.11

YouTube is a video-sharing website on which users can upload, share, and view videos. I have got for you step-by-step tutorial on how to create your own YouTube search engine.

Create folders and files structure like this on image below:

jQTubeUtil

tubeutil.js is a jQuery plugin created by Nirvana Tikku called jQuery YouTube Search Utility.

The jQTubeUtil utility is just a wrapper for the YouTube GDATA API. The GDATA API supports JSON requests, which is what the jQTubeUtil utilizes jQuery to take advantage of. The utility simply builds the URLs by providing a friendly interface to interact with both the search and the results.

What can it do?

search YouTube using keywords
search YouTube's standard feeds
fetch a specific YouTube video
get Autocomplete suggestions for YouTube

I'm going to use it because it is really fast and can integrate YouTube search engine on any site.

Before you start, you need to have YouTube API key for developers. Just visit YouTube API to get it.

index.html

As usual, we are starting with the HTML part of the tutorial.

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to create your own YouTube search engine</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tubeutil.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>

<body>
	
	<form class="blocks" action="#" method="get">
		<p><input type="text" class="search" /></p>
		<p><input type="Submit" class="btn" value="Search" /></p>
		<ul class="reset autocomplete"></ul>
	</form>
	
	<ul class="reset movies"></ul>

</body>
</html>

Note that I have added reset class to two unordered lists. It is just needed to reset CSS style.

init.js

First of all you must initialize the jQTubeUtil in order to make requests to YouTube.

$(function(){
	
	jQTubeUtil.init({
		key: '', // your API key - required!
		orderby: 'viewCount', // optional, available values: relevance, published, viewCount, rating
		time: 'all_time', // optional,  available values: today, this_week, this_month, all_time
		maxResults: 9
	});
	
});

Next step is to create function that will show results - let's call it show_videos()

function show_videos(){
	var val = $('.blocks').find('.search').val(); // get value from '.search' element
	$('.videos').addClass('preloader').html(''); // add preloader class and clear HTML in '.videos' element
	jQTubeUtil.search(val, function(response){ // init search method
		var html = '';
		for (v in response.videos) {
			var	video = response.videos[v], // YouTube video object
				minutes = parseInt(video.duration / 60),
				seconds = video.duration % 60;
			// create 'li' element
			html += '<li>';
			html += '<p class="image"><a href="http://www.youtube.com/watch?v='+video.videoId+'">';
			html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
			html += '</a></p>'
			html += '<p class="entry"><a href="http://www.youtube.com/watch?v='+video.videoId+'">' + video.title + '</a>';
			html += '<small>' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + '</small>';
			html += '</p>';
			html += '</li>';
		}
		$('.videos').removeClass('preloader').html(html); // remove preloder class and show videos
	});
}

I'm glad that you are still reading ;) Now we are going to create autocomplete suggestions.

$('.search').keyup(function(){
	var val = $(this).val(); // get '.search' value when the user releases a key on the keyboard
	jQTubeUtil.suggest(val, function(response){
		var html = '';
		for(s in response.suggestions){
			var sug = response.suggestions[s];
			html += '<li><a href="#">'+sug+'</a></li>';
		}
		if (response.suggestions.length)
			$('.autocomplete').html(html).fadeIn(500); // show suggestions if exists
		else 
			$('.autocomplete').fadeOut(500); // hide '.autocomplete' element
	});
});

Last step is to create click events on '.btn' element and anchor in '.autocomplete' element.

$('.btn').click(function(){
	show_videos();
	$('.autocomplete').fadeOut(500);
	return false;
});

$('.autocomplete').find('a').live('click', function(){
	// .live() method is able to affect elements that have not yet been added to the DOM 
	var text = $(this).text();
	$('.blocks').find('.search').val(text);
	$('.autocomplete').fadeOut(500);
	show_videos();
	return false;
});

Finally init.js looks like:

$(function(){
	
	jQTubeUtil.init({
		key: '', // your API key - required!
		orderby: 'viewCount', // optional, available values: relevance, published, viewCount, rating
		time: 'all_time', // optional,  available values: today, this_week, this_month, all_time
		maxResults: 9
	});
	
	$('.search').keyup(function(){
		var val = $(this).val(); // get '.search' value when the user releases a key on the keyboard
		jQTubeUtil.suggest(val, function(response){
			var html = '';
			for(s in response.suggestions){
				var sug = response.suggestions[s];
				html += '<li><a href="#">'+sug+'</a></li>';
			}
			if (response.suggestions.length)
				$('.autocomplete').html(html).fadeIn(500); // show suggestions if exists
			else 
				$('.autocomplete').fadeOut(500); // hide '.autocomplete' element
		});
	});	
	
	$('.btn').click(function(){
		show_videos();
		$('.autocomplete').fadeOut(500);
		return false;
	});
	
	$('.autocomplete').find('a').live('click', function(){
		// .live() method is able to affect elements that have not yet been added to the DOM 
		var text = $(this).text();
		$('.blocks').find('.search').val(text);
		$('.autocomplete').fadeOut(500);
		show_videos();
		return false;
	});
	
	function show_videos(){
		var val = $('.blocks').find('.search').val(); // get value from '.search' element
		$('.videos').addClass('preloader').html(''); // add preloader class and clear HTML in '.videos' element
		jQTubeUtil.search(val, function(response){ // init search method
			var html = '';
			for (v in response.videos) {
				var	video = response.videos[v], // YouTube video object
					minutes = parseInt(video.duration / 60),
					seconds = video.duration % 60;
				// create 'li' element
				html += '<li>';
				html += '<p class="image"><a href="http://www.youtube.com/watch?v='+video.videoId+'">';
				html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
				html += '</a></p>'
				html += '<p class="entry"><a href="http://www.youtube.com/watch?v='+video.videoId+'">' + video.title + '</a>';
				html += '<small>' + minutes + ':' + (seconds < 10 ? '0'+seconds : seconds) + '</small>';
				html += '</p>';
				html += '</li>';
			}
			$('.videos').removeClass('preloader').html(html); // remove preloder class and show videos
		});
	}
	
});

default.css

ul.reset,
ul.reset li {
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}

.blocks {
	float:left;
	width:1000px;
	margin-bottom:50px;
	position:relative;
}

.blocks p {
	float:left;
	margin:0;
}

.blocks .search {
	float:left;
	width:258px;
	height:42px;
	line-height:42px;
	padding:0 10px;
	font-size:13px;
	color:#8c8c8c;
	background:url(../gfx/input.png) no-repeat;
	border:none;
}

.blocks .btn {
	float:left;
	width:71px;
	height:42px;
	border:none;
	text-indent:-9999px;
	cursor:pointer;
	background:url(../gfx/btn.png) no-repeat;
}

ul.autocomplete {
	display:none;
	width:300px;
	padding:10px;
	position:absolute;
	top:50px;
	left:0;
	background:#fff;
	border:1px solid #e4e4e4;
	
	/* CSS3 */
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}

ul.autocomplete li a {
	display:block;
	padding:5px 10px;
	font-size:11px;
	outline:none;
}

ul.autocomplete li a:hover {
	background:#f5f5f5;
	color:#991b22;
	
	/* CSS3 */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.videos {
	float:left;
	clear:both;
	width:100%;
	min-height:200px;
}

.videos.preloader {
	background:url(../gfx/loader.gif) no-repeat center;	
}

ul.videos li {
	float:left;
	width:300px;
	padding:10px;
	margin:0 5px 5px 0;
}

ul.videos li p {
	margin:0;
	padding:0;
}

.videos .image {
	float:left;
	width:120px;
	height:90px;
	font-size:0;
	line-height:0;
	padding:5px;
	background:#fff;
	border:1px solid #E6E6E6;
	overflow:hidden;
}

.videos .entry {
	float:right;
	width:163px;	
	font-weight:bold;
}

.videos .entry small {
	display:block;
	font-weight:normal;
	color:#ACACAC;
}

Finished! Thanks to Nirvana Tikku for creating worth jQuery plugin!

As usual, check out the demo and leave a comment below.

Comments:

Chris Rogala

30.06.11, 01:43

Great job with this, I love it!! In response to Jason requesting a way to play this in the current page, I would recommend using the embed code from youtube:

"<iframe width="560" height="349" src='"+video.videoId+"' frameborder="0" allowfullscreen></iframe>

I haven't tried this, but it makes since to me.