embed youtube videos using its api

Incrustar videos youtube

29 May, 2013

youtube tiene una api javascript que nos permite consultar información de su contenido y enlazarlo con nuestro site entre otras cosas. recientemente me encontré con la tarea de programar contenido dinámico de un canal youtube y para ello primero miré su libreria api.

aquí podremos encontrar toda la documentación necesaria para usar la api a nuestro placer. en ella encontré como mostrar un vídeo embeded via tag iframe de html

en la documentación también se pueden encontrar instrucciones para obtener la información de los vídeos del canal. esta información me era útil para saber que mostrar. para esto youtube ofrece su información en json mediante consultas ajax. este sistema nos ofrece información como: duración del vídeo, nombre, descripción, ubicación, ratio, …

ya tenia el “como” (iframe) y el “que” (json), ahora solo me faltavan las herramientas. para esta finalidad usé el framework jquery que permite variedad de funcionalidades. para poder realizar las operaciones siguientes estudié las instrucciones anteriores pero antés definí la finalidad y funcionalidad.

el objetivo de esta tarea era hacer un contenedor (A) con un vídeo principal en tamaño grande acompañado de otro contenedor (B) con el listado de imagenes de los vídeos del canal youtube.

interactividad:

  • player de vídeo en A
  • click encima de cada una de las imágenes de B para mostrar el vídeo adjunto en A.

la interactividad del player viene ya dada por el iframe del api de youtube. el api me permitió configurar parámetros del player como las dimensiones y el borde. pero para dar acción a las imágenes primero debía conocer la información del canal.

el iframe básico deseado requiere de la url del vídeo, los atributos del player y las dimensiones de este:

el atributo src contiene la url del vídeo principal. la variable javascript id contiene el id del vídeo a mostrar que la obtuve de la siguiente manera:

aquí formamos un elemento de la lista de vídeos con su identificador, la imagen thumbnail, el título y la descripción. cada elemento de la lista va marcado con el id del vídeo a mostrar.

para obtener la información anterior hice una consulta ajax al listado del canal y traté cada elemento según sus funciones:

la variable playListURL contiene la URL del canal de youtube, la variable json es la que contiene la información de todos los vídeos y a través de la función each de jquery cada ítem contiene la información de un vídeo. en formato matemático: elemento = ítem = json.data.ítems[x].

una consulta ajax de jquery es asíncrona por lo que añadí la acción del click al terminar de procesar el listado. esta acción cambia el atributo src de la url pasa a tener el id clickado.

acción del click

y con todo lo anterior y algunos arreglos más pude conseguir mi objetivo.

aquí tenéis el resultado obtenido. adjunto el código por si alguien quiere verlo y mejorarlo.

saludos.

    Etiquetas: , , , ,

    Dejar un comentario