Youtube Instant Search: Un plugin para JQuery

Youtube Instant Search es una pequeño plugin para jQuery que permite hacer búsquedas de videos y mostrar los resultados en tiempo real, aprovechando el API de Youtube y leyendo los feeds en formato JSON.

Es nuy sencillo de agregar y personalizar. primero, si no la tenemos, debemos agregar la librería jQuery cosa que hacemos colocando esto antes de </head>

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

Y debajo, el script con el plugin:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $(".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>

Allí, veremos algunos detalles configurables, el más importante es lo definido en var video_frame que es lo que escribirá el código HTML con el video donde podemos cambiar los valores de width y height a gusto así como agregarle parámetros extras a la URL de src para configurar la forma en que se mostrarán.

Para utilizar el plugin, basta que coloquemos dos DIVs; uno con el control para hacer la búsqueda y otro vacío donde se mostrarán los resultados; estos, los ponemos en cualquier parte donde quisiéramos verlos:

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

Un poco de CSS para armar todo:

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

Y eso es todo.