<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".search_input").focus();
$(".search_input").keyup(function() {
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
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;
var video_frame="<iframe width='500' height='300' 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);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
//]]>
</script>

<div id="input_box">
<input type="text" class='search_input' />
</div>
<div id="result"></div>

<style>
#input_box {
text-align: center;
width:500px;
}
.search_input {
font-size: 20px;
padding: 5px;
text-align: center;
width: 400px;
}
#result {
background-color: #91D0A1;
margin-top:25px;
min-height:380px;
width:500px;
}
#no { text-align: center; }
#title {
font-size: 18px;
height: 40px;
line-height: 1;
padding-bottom: 10px;
text-align: center;
}
#count {
height: 20px;
padding-top: 10px;
text-align: right;
}
</style>

]]></b:skin>