Comunidad de diseño web y desarrollo en internet

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

Por pepoflex el 20 de Marzo de 2012 con 14,714 visitas

HTML, CSS y Javascript Otros tutoriales por pepoflex.

En esta ocasión quiero compartir un plugin muy interesante de jQuery que encontré navegando por la Web: Tubular Plugin. Éste coloca un video de YouTube cualquiera que elijas como fondo de tu página Web.

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

Primero descargamos el plugin Tubular. Dentro de nuestras etiquetas <head> </head>, colocamos o llamamos los archivos que están dentro de la carpeta js del archivo .RAR que bajamos. Entonces llamamos los archivos así:

Código :

<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>


Creamos las siguientes capas o DIVS dentro de nuestras etiuqetas <body> </body> de la siguiente manera:

Código :

<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>



Creamos nuestra Hoja de estilos CSS, para los nombres o id de las capas o divs correspondientes:

Código :

<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>



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

Código :

$().ready(function() {
   $('body').tubular('[b]AzNZaIYce-U[/b]','wrapper');


AzNZaIYce-U : 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 sería lo que esta después de v= : AzNZaIYce-U o lo que está en negrita. El video por defecto carga sin sonido, el cual lo podemos activar con el botón Sonar/Silenciar.

Y listo! con eso ya hemos finalizado y todo queda listo para usar!

Acá les dejo un demo:

DEMO

Espero les haya gustado.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (40)

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate