Personalizar el reproductor de Youtube con jQuery

En reiteradas oportunidades observe como algunos diseñadores haciendo uso de la muy completa API de Youtube personalizaban el reproductor, algo genial si lo que se busca es que este se encuentre en armonía total con el diseño. Y hoy y casi por casualidad llego al blog de Trevor Davis, que desarrollo un muy simple pero completo plugin jQuery para personalizar a nuestro gusto el reproductor de Youtube.

Por ejemplo, esta es la captura de pantalla del reproductor personalizado:

personalizar reproductor youtube jquery

Ademas de obviamente las ventajas de cambiar el aspecto del reproductor a nuestro gusto tenemos una diferencia de lo más importante, se trata de la forma de embeber los vídeos, para ellos solo vamos a utilizar un enlace con la siguiente forma:

<a href="http://www.youtube.com/watch?v=sxUjB3Q04rQ">Bolt Arms - Around the World</a>

Un código muy distinto al que se utiliza comúnmente que es bastante mas “sucio” y que por defecto no pasa la prueba W3. Luego debemos inicializar el plugin, para ello solo requerimos unas lineas:

$(document).ready(function() {
  $('a.video-link').ytchromeless();
});

Ya con esas lineas y cargando correctamente todas las bilbliotecas requeridas por el plugin cada enlace será reemplazado por el video con el reproductor personalizado.

Web: blog de Trevor Davis

Categorizado en: