TECNato – TIC's Perú

Colocar un Video de YouTube como fondo de tu Web con jquery.tubular.js

martes, 20 de marzo del 2012 6 comentarios

En esta ocación quiero compartir un Plugin de jQuery que encontre navegando por la web, este plugin se llama Tubular.
Este plugin coloca un video de youtube cualquiera que elijas como Fondo de tu Página Web, obteniendo asi un diseño de tu Web impresionante.

Tubular Plugin a su ves nos da la opción de colocar sus controles para el video, para poder detenerlo, pausarlo o silenciar el audio.

Comencemos:

Primero:
Descargamos el Plugin Tubular.
Segundo:
Dentro de Nuestra etiquetas <head> </head>, colocamos o llamamos los archivos que estan dentro de la carpeta js del archivo RAR que bajamos (yo solo use esa carpeta el resto no lo use, si ustedes desean lo peuden usar). Entonces llamamos los archivos asi:

<head>
<script src=”js/jquery-1.7.1.min.js” type=”text/javascript”></script>
<script src=”js/swfobject.js” type=”text/javascript”></script>
<script src=”js/jquery.tubular.js” type=”text/javascript”></script>
<script src=”js/mission-control.js” type=”text/javascript”></script>
</head>
Tercero:
Creamos las siguientes capas o DIVS dentro de nuestras etiquetas <body> </body> de la siguiente manera:

<body>

<div id=”wrapper”>

<p id=”video-controls”><span class=”azulita”>Controles:</span> <a class=”videoPaused” href=”” id=”videoPause”>Pausar / Reproducir</a> |
<a href=”” id=”videoMute”>Sonar / Silenciar</a> |
<a href=”” id=”videoStop”>Detener Video</a></p>
<div id=”contenido”>
<p>Bienvenidos a esta demo !</p>
<p>El Plugin <a href=”http://www.seanmccambridge.com/tubular/” target=”_blank”>Tubular</a> de jQuery me hace pensar decir que: jQuery es impresionante y no tiene limites.</p>
<p>VIDEO: Go Let it Out – Oasis</p>
</div>

</div>

</body>
Cuarto:
Creamos nuestra Hoja de estilos CSS, para los nombres o id de las capas o divs correspondientes:

<style type=”text/css”>

#video-controls {
color: #FFF;
background-color: #F06;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
text-align: center;
position: absolute;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
left: 19px;
top: 40px;
}

#video-controls a:link {color: #FFF; text-decoration:none;}
#video-controls a:visited {color: #FFF; text-decoration:none;}
#video-controls a:hover {color: #FFF; text-decoration:none;}
#video-controls a:active {color: #FFF; text-decoration:none;}
.azulita {
color: #039;
font-weight: bold;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
}
#contenido {
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
color: #FFF;
position: absolute;
left: 23px;
top: 118px;
width: 622px;
background-image: url(img/bg-texto.png);
background-repeat: repeat;
padding: 15px;
}
a:link {
color: #F06;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F06;
}
a:hover {
text-decoration: underline;
color: #F06;
}
a:active {
text-decoration: none;
color: #F06;
}
</style>

 

Quinto:
Abrimos nuestro archivo mission-control.js que vino dentro del archivo RAR que descargamos de la página del Plugin, y en la 2da linea donde dice:

$().ready(function() {
$(‘body’).tubular(‘AzNZaIYce-U‘,’wrapper’);

AzNZaIYce-U <— este es el ID del video de youtube que vamos a reproducir.

Por ejemplo:

Si tenemos el siguiente video:

http://www.youtube.com/watch?v=AzNZaIYce-U

la ID seria lo que esta despues de v=AzNZaIYce-U o lo que esta en negrita.

Y listo con eso ya tenemos finalizado todo y listo para usar !

Aca les dejo un demo:

DEMO
NOTA:
– En la página del plugin revisen bien los archivos por si no encuentran alguno, sean observadores.
– El video por defecto Carga sin sonido, el cual lo podemos activar con el boton Sonar/Silenciar.
Espero les haya gustado.


Escrito por para TECNato

6 comentarios

  • Akart
    21 de agosto del 2012

    Hola,
    gracias por vuestro tutorial.
    tengo una duda. Como hago para que el fondo se quede fijo. Porque he creado un menu en wordpress siempre con jquety y cada vez que cambio sección del menu el video empieza desde el principio.
    Gracias.

  • Juan Castro Lurita
    21 de agosto del 2012

    Una solucion que podrias usar es ajax jquery, podrias carga el contenido de tus paginas sin refrescar,
    Por ejemplo si haces click en un menu te sale un texto que dice cargando… y con una imagen girando en gif.

    Ademas tu web se veria mas dinamica.

    Una idea:

    $(document).ready(function(){
    $(“#enlaceajax”).click(function(evento){
    evento.preventDefault();
    $(“#destino”).load(“fotos/contenido-ajax.html”);
    });
    })

    link id=”enlaceajax”

    div id=”destino”>

  • Adolfo
    25 de abril del 2013

    Muchas gracias por el tutorial! Ya tenía aplicado el tubular, pero no conseguía que me funcionara el play y el pause. Pero tengo una duda ahora, lo que me ocurre es que cuando termina el video, no vuelve a empezar y aparecen los videos relacionados. Como puedo hacer para que el video se repita una y otra vez? he visto que tiene el parametro loop=1 pero lo ignora. Gracias!

  • Juan Castro Lurita
    15 de julio del 2013

    Hola Adofo.
    Puedes chequear la documentación oficial en su web del plugin, a mi si me funcionaba el loop, parece que han hecho cambios en su plugin.

  • Freddy Sosaya Chucan
    8 de enero del 2017

    Estimado Juan, Con mi saludo fraterno, comentarte que soy principiante en este negocio de jquery plugin, te agradeceria me proporciones un modelo/ejemplo completo de como funciona el plugin TUBULAR, estoy intentando desarrollarlo con las indicaciones obtenidas por este medio pero no me funciona. Gracias

  • Juan Castro Lurita
    9 de enero del 2017

    Hola Freddy.
    Puedes descargarte el plugin oficial:
    https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/jquery-tubular/jquery.tubular.1.0.1.zip

    Lo he probado y funciona sin problemas, cabe recalcar que debes colocar el ID del video en 2 archivos que estan en la carpeta js, el archivo jquery.tubular.1.0.js y el archivo index.js
    Gracias por visitarnos :)

  • Deja tu comentario

    (Iniciar sesión)

    TECNato

    TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación)

    Hazte miembro

    TECNato es libre y abierto a nuevos miembros Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

    Soporte

    Diseño Web:
    Grupo Sistemas
    Gestor de contenidos:
    WordPress