Insertar un video de Youtube como fondo con jQuery

Una implementación que nunca se me ocurrió relacionada con los vídeos de Youtube es la de utilizarlos como fondos, esto lo podemos lograr muy fácilmente utilizando un plugin jQuery llamado jQuery.mb.YTPlayer.

Este fantástico plugin se configura de forma muy simple, y permite gestionar aspectos básicos relacionados a la reproducción tales como: controles básicos, volumen, opacidad, aspecto, proporción, calidad, bufferIMG.

Youtube como fondo jQuery

Una de las preocupaciones lógicas al utilizar un video como fondo es el tiempo de carga, un aspecto que se encuentra perfectamente pensado por el creador del plugin ya que el mismo brinda una serie de mecanismos para gestionar de forma eficiente las demoras y tiempos iniciales de descarga, para ello utiliza imágenes que se muestran mientras el video inicia su reproducción desde Youtube.

Ejemplo de uso:

$(function(){ $(".movie").mb_YTPlayer(); });

El ejemplo que coloque no utiliza ninguna variable y ejecuta un reproductor configurado por defecto, no obstante y si lo que queremos es modificar el aspecto visual del video podemos configurar las imágenes que queremos utilizar como controles, simplemente pasando por parámetro la ruta a los archivos.

  • $.YTPlayer.controls.play= “<img src='images/play.png'>
  • $.YTPlayer.controls.pause= “<img src='images/pause.png'>
  • $.YTPlayer.controls.mute= “<img src='images/mute.png'>
  • $.YTPlayer.controls.unmute= “<img src='images/unmute.png'>

En el sitio oficial del plugin pueden ver una demostración de su funcionamiento.

Web: jQuery.mb.YTPlayer