Añadir un video de YouTube como fondo de página

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

En otras ocasiones ya hemos visto cómo poner un mapa de Google Maps de fondo de la página, ahora lo que vamos a conseguir es insertar un video de YouTube como fondo de página. Para ello utilizaremos el plugin jQuery llamado jQuery.mb.YTPlayer.

Su configuración es bastante simple, y nos permite gestionar opciones básicos relacionados con la reproducción del video como por ejemplo: controles básicos, volumen, calidad, proporción, aspecto, bufferIMG, opacidad…

Añadir un video de Youtube como fondo

No tendrás que preocuparte por el tiempo de carga de tu site, ya que el propio plugin nos ofrece una serie de opciones para gestionar de forma eficiente los retrasos y tiempos de descarga del video inicial, para ello utiliza imágenes que son mostradas mientras el video inicia su reproducción.

Un ejemplo del simple funcionamiento de este plugin y de la utilización del mínimo cóodigo lo podemos encontrar implementando la siguiente configuración básica. De todas formas, si lo que queremos es modificar el aspecto visual del video podemos configurar las imágenes que queramos utilizar como los controles, simplemente pasando por parámetro la ruta a los archivos.

Llamada JS:

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

Constructor HTML

<a id="bgndVideo" href="http://www.youtube.com/watch?v=MR9av-I35ME">
Bill Viola</a>

Parámetros

$.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 siguiente enlace se puede ver una demostración de su funcionamiento.

Web: jQuery.mb.YTPlayer

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.