buscador de videos en tu pagina

¿Quereis un buscador como este?

Para instalarlo en tu web, primero tienes que pegar este codigo jQuery con el script antes de </head>

<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>

Luego, en la parte CSS añadis los estilos

<style> /* el DIV donde colocamos el buscador */ #input_box { text-align: center; width:500px; } /* el cuadro de búsqueda */ .search_input { font-size: 20px; padding: 5px; text-align: center; width: 400px; } /* el DIV donde se mostrarán los resultados */ #result { background-color: #000; margin-top:25px; min-height:380px; width:500px; } /* un texto, sólo visible cuando no hay resultados a mostrar */ #no { text-align: center; } /* el título del video encontrado */ #title { font-size: 18px; height: 40px; line-height: 1; padding-bottom: 10px; text-align: center; } /* el texto inferior con el contador de YouTube */ #count { height: 20px; padding-top: 10px; text-align: right; } </style>

Por ultimo, alli donde querais que aparezca el buscador, pegais este codigo y ¡listo!

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