SummArg | Cursos y recursos para webmasters

13/01/2011

Utilizar video de YouTube como fondo de tu website con jQuery

Tubular es un plugin para jQuery que nos permite reproducir un video de YouTube en el background de una página agregando unas pocas líneas para linkear el recurso y activarlo.

También permite la inserción de controles para el video, de modo de poder pararlo, pausarlo o silenciar el audio.

Demo | Descarga

Modo de uso

Descargar el .zip desde el link de descarga, descomprimir y copiar los dos archivos dentro del directorio /js/ a nuestro servidor.

Entre etiquetas <head> insertar:

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>
<script type="text/javascript" charset="utf-8" src="js/mission-control.js
"></script>

Luego activar el plugin y reemplazar “ID-de-Video-YouTube” por el video correspondiente. En una dirección de cualquier video YouTube, el ID del video son las letras y números que están luego del signo igual.

http://www.youtube.com/watch?v=T3aWPfdIeAM

<script type="text/javascript">
$().ready(function() {
                $('body').tubular('ID-de-Video-YouTube','wrapper');
        });
</script>

El script mission-control.js que insertamos anteriormente, nos permitirá utilizar los controles del video, pudiendo pausar, parar o silenciar el mismo.

<p id="video-controls">Controles:
<a class="videoPaused" href="" id="videoPause">Play/Pause</a> |
<a href="" id="videoMute">Mute</a> |
<a href="" id="videoStop">Stop Video</a></p>

Sin dudas un recurso original.

Dejar un comentario

  1. Alonso

    hola!
    muchas gracias, antes de leer tus explicaciones me imaginaba que esto era imposible. Es la explicacion mas clara que hay con respecto a este tema, felicitaciones!
    solo me asalta una duda, si me pudieras ayudar:
    sigo tus pasos a la letra, me incrusta el video y todo, pero los divs que hago siempre me quedan debajo. ya probe con el z-index y nada… tu sabes la respuesta? te lo agradeceria muchisimo.
    SALUDOS!
    A.

  2. Podrías postear la URL del proyecto en donde lo estás implementando?

  3. Hola! Muchas gracias por el tutorial, me ha aclarado bastante las cosas. Estoy intentando implementarlo en wordpress, sabes que ficheros debería de tocar?

    Gracias!

    Xermán

  4. Nekko

    Probablemente header.php e index.php.

Dejar un comentario