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

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.

Utilidades para tu Sitio Web: jQuery

jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la licencia MIT y de la GNU General Public License, Versión 2. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas. Microsoft la añadirá en su IDE Visual Studio y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time.

Uso

jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza las funciones $() o jQuery().

Fuente