Comunidad de diseño web y desarrollo en internet

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

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

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.

Este sábado el más importante inversionista de Silicon Valley y presidente de Y Combinator dará una clase en vivo en Platzi. Unete ya mismo.

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