Как установить поиск роликов на Youtube к себе в блог

Потянуло меня на ютубовскую тему в связи с кратковременным попаданием в топ10 Яндекса по этому запросу... Жаль, что не долго там продержался ^^, ну да ладно, раскроем тему видеосервиса глубже.
Сегодняшний скрипт отличается от своих собратьев (например, redytube) скоростью выполнения и простотой установки. Для его работы, точнее, для работы поиска роликов на ютубе, требуется вставить на страницу несколько кодов (для Blogger тупой копипаст разруливает).

Сначала смотрим демку:

Что будем смотреть, а?

Можете ввести любой запрос. Скрипт, используя api Youtube, jQuery и Ajax, обработает его и подберёт подходящий ролик без перезагрузки страницы. Наш великий и могучий конечно тоже поддерживается. Чтобы добраться до искомого ролика, сконкретезируйте запрос дополнительной информацией (название, год, автор и т.п.). По дефолту, если набирать только имя автора (например, видеоклип по названию группы), будет выдан результат самого "жирного" (по просмотрам) ролика заданной темы.

Этот скрипт может быть полезен в качестве приятной фишки для посетителей обычного блога или прокачки функциональности видеоблога. Кстати, под плеером располагается счётчик просмотров запущенного видео.

Установка в блог поиска на Youtube
Можно кидать на страницу коды друг за другом. И не забудьте подключить библиотеку jQuery (достаточно версии 1.4.1). Если не знаете, как это сделать в Blogger, используйте поиск (в футере моего блога)↓

Javascript:

<script type="text/javascript">
$(document).ready(function()
{

$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API 
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';

$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{

if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
// IFRAME Embed for YouTube
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";

var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";

$("#result").html(final); // Result

});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
</script>

Если код не работает, попробуйте взять из этого файла.

Css:

<style>
#result
{
background-color:#000;
margin-top:25px;
min-height:400px;
width:640px;
border:solid 10px #ffffff;
-moz-border-radius:9px;
-webkit-border-radius:9px;
}
#no
{
padding:30px;
font-size:24px;
color:#fff;
}
#title
{
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count
{
background-color:#fff;
text-align:left;
padding-top:8px;
}
</style>

Стили регулируют внешний вид чёрного бокса для показа плеера с видеороликами
-- #result - внешний вид самого бокса (результата)
-- #title - заголовок или название найденного видео
-- #count - внешний вид счётчика

Форма для запроса и текст для неё:

Что будем смотреть, а?
<input type="text" class='search_input' />
<div id="result">
</div>

Автор зачётной темы живёт здесь.

Ну а что ещё интересного?
Thumbnail или автоскриншот для Youtube
Поиск для блога с помощью Google AJAX Search API и jQuery
Всплывающее окно поиска по сайту
Как проигрывать видеоролики в блоге или Альтернативный плеер для Youtube