JMiur [E]


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.

29 comentarios:

Felipe Calvo  

De lujo JMiur, el plugín es y funciona excelente,
muchas gracias por compartirlo. :D

Responder
Watesam  

:O

Responder
Colgando Estrellas  

Hola jMiur, podrías decirme en que parte coloco los Div´s, soy mas que novata en esto, Mil gracias!!!

Responder
Beben Koben  

interest my master...
but we can do more and more with API KEY ;)
what we want can get there :D
please read it my master Get picky with the Google Picker API
and this is my trying on my dummies blog :P
Picky with the Google
Similar on google +1 feature :O
Nice plugin :)

Responder
Johnny Uve  

Es una pasada este plugin, estoy pensando si ponerlo en mi blog. Cada dia me gusta mas tu blog, JMiur, eres el crack de los webmasters del blog. Saludos.

Responder
The Media Download  

Increible! Lo usare en mi blog! :)

Responder
Johnny Uve  

Te queria hacer una consulta. Tengo puesto en la plantilla de mi blog el "lightwindow" y el jquery con el efecto acordeon (accordion). Los dos estan justo de /head. Bien, pues solo me funciona el que esta justo antes de /head y el otro no. Si cambio los scripts, el que esta mas cerca de /head es el que funciona. He visto que tu tienes ambas funciones y te van perfectamente. A ver si me pudes sacar de dudas para que vayan los dos. Gracias.

Responder
JMiur  

NicoNico:
Sí, parece funcionar bien; a veces, tarda un poco pero eso ya es un tema de YouTube.

Colgando Estrellas:
Los DIVs los pones allí donde quieras que se muestre; puede ser en una entrada como en este ejemplo o en un elemento HTML que agregas a la sidebar.

Beben Koben:
I'm gonna read that and try to learn. Thanks :D

Johnny:
Gracias por la exageración :D

Llightwindow utiliza Prototype y por lo tanto, es incompatible con jQuery salvo que se hagan modificaciones que no aconsejaría ya que cargar dos librerías es demasiado. Una vez que decides utilizar una de esas librerías, el resto de las cosas las debes adaptar para esa librería o bien, como en mi caso, usar un blog auxiliar para insertar esos ejemplos con un IFRAME.

Responder
Anónimo  

Es un bonito plugin :)

Responder
EpideMia  

Está muy bueno JMiur! me gusta mucho!!

viendo el plugin se me ocurrió algo. hay alguna forma de que en vez de que halla una barra de búsqueda, halla un listado, por ejemplo, de los vídeos que nosotros quisiéramos que la gente vea??

no se, me imagino un listado de palabras o imágenes, que al hacer click en ellas el plugin encuentre el vídeo como si lo hubiésemos buscado con la barra buscadora.

igual no importa, me gusto el plugin y me puse a imaginar cosas. muy bueno el aporte. te felicito!!!

Responder
JMiur  

El parámetro de búsqueda es keyword así que bastaría colocar ese texto en esa variable:
var keyword= "palabra";
aunque, obviamente, el resultado sería absolutamente impredescible.

Responder
maskay  

muy bueno, quiero incluirlo en mi web: http://www.maskay.com

Responder
jsstoni  

esto funciona tanto como para blogs y paginas web ?

Responder
JMiur  

Sí, claro, como cualquier otro plugin de jQuery.

Responder
jsstoni  

una pregunta algun otro script similar a este pero que busque video en distos servidores ?

Responder
JMiur  

Lo desconozco.Para que eso exista, el servicio en si mismo debe proveer el API correspondiente.

Responder
kwon sang woo  

hi :) lo practique hay manera de personalizar la barrita del buscador
ejemmplo:añadirle una lupa o un boton

mi web:

http://pdulceamor.blogspot.com/

JMiur  

En al entrada se muestra la base de las reglas de estilo así que puedes modificarlas como quieras.

Responder
kwon sang woo  

hi el problema
es que cundo entro a mi blog me lleva al final igual cuando entro a culquier entrada me lleva al final
COMO PODRIa SOLUCIONaRLO

JMiur  

Probablemente, debas eliminar esta línea del script:

$(".search_input").focus();

Responder
kwon sang woo  

si ya se soluciono :D grasias

Responder
Anónimo  

hola.
hace tiempo atras use este script y me resulto muy util pero ahora se me ocurrio otra cosa. Que es que usando este mismo script al entrar a un post determinado busque videos relacionados con el titulo del post de manera automatica. Espero sea posible y me ayudes con esto gracias.

JMiur  

Intentar hacer algo así sería bastante complicado, imagino que puede hacerse pero debería probarse y, sobre todo encontrar alguna forma práctica y eficiente de encontrar esas palabras o textos

Intentar hacer algo así sería bastante engorroso, imagino que puede hacerse pero debería probarse y, sobre todo encontrar alguna forma práctica y eficiente de encontrar esas palabras o textos.

En lugar de usar el evento keyup y extrae el texto del formulario, tal vez, podrías usar el título de la entrada.

No puedo darte un código exacto para eso.

Responder
Anónimo  

Mira buscando en las opciones de youtube logre la búsqueda que quería pero necesito que la palabra SANKAREA se remplace por el nombre del titulo del post, cosa que al entrar a cualquier post se realice la busqueda segun el titulo. No se me ocurre como hacerlo ¿Alguna idea?
* iframe id="ytplayer" type="text/html" width="640" height="360"
src="http://www.youtube.com/embed/?listType=search&list=SANKAREA&autoplay=1&controls=0&rel=0&showinfo=0&autohide=1&color=white&theme=light"
frameborder="0" allowfullscreen *

JMiur  

Lo preguntaste en otra entrada y allí lo respondí.

Responder
Unknown  

Excelente aporte. Gracias. Aun no lo he probado pero tengo una consulta.
La demo solo muestra un resultado, pero existen varios que cumplen el criterio de busqueda pero no se muestran. ¿Como hago para mostrar todas las opciones? asi como lo hace youtube o www.cleepr.com

Gracias

JMiur  

No tengo idea.

Responder
Anónimo  

Hola

Que vento puedo utilizar para que busque automaticamente una palabra que ya le puse.

Es que con el keyup la gente debe escribir para que busque, pero como puedo hacer para que automaticamente busque el video con la o las palabras que yo le puse ?

Responder
Anónimo  

Hola

Ya fui capaz de modificar el codigo para que se ejecute al inicio y muestre el video del titulo, muchas gracias.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR