COLOCAR UN VIDEO DE YOUTUBE COMO FONDO DE TU PAGINA WEB

Navegando por la web, encontré algo interesante que me gustaría compartir, era acerca de la forma de colocar videos de youtube como fondo de una pagina web, en el siguiente link pueden descargar la demo que code.google.com http://code.google.com/p/jquery-tubular/downloads/list, una vez descargado, si queremos utilizarlo en nuestro proyecto, debemos copiar dos archivos javascript que vienen en la carpeta js
jquery.tubular.js y mission-control.js, mas la carpeta del estilo css,el primero nos sirve para poder visualizar el video y el segundo para los controles del video (stop/pausa/silencio=) una vez hecho esto en el head de nuestra pagina debemos agregar la siguientes lineas de codigo


<link href="css/screen.css" rel="stylesheet" type="text/css" />




<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="http://code.jquery.com/jquery-1.4.3.min.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>

y luego en el archivo mission-control.js borramos la siguiente linea  $('body').tubular('_VKW_M_uVjw','wrapper');
y en nuestra pagina agregamos antes de cerrar el head el siguiente codigo




<script type="text/javascript">
$(document).ready(function() {
                $('body').tubular('IDVIDEO','wrapper');
        });
</script>




aqui llamamos al archivo que nos permite ver el video, que recibe dos parametros el id del video de youtube , que esta formado por letras y numeros y aparece despues del primer = de la url


ejem: http://www.youtube.com/watch?v=zi1MYyMQWqU&feature=related
(lo resaltado con rojo es el id), y el siguiente parametro es el id del div contenedor
y listo ahora deberia visualizarnos el video, por defecto aparece en silencio, hacemos clic en el link mute
 el siguiente es el codigo de los controles


<div id="wrapper">
<div id="main">
<a href="http://www.seanmccambridge.com/tubular/"><img src="media/logo.png" alt="Tubular logo" id="logo" /></a>
<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>

</div>
<div style="margin-left:400px;;margin-top:20px;"class="black-50">
            <h3>Este es un ejemplo de insertar video como fondo de una pagina web</h3>


</div>
</div>







-Aqui dejo algunas imagenes de los videos que probe (bad romance de lady gaga y una linda música de nuestra selva peruana :D ) , como dije antes solo cambiamos donde dice IDVIDEO, por el id del video que queramos que se visualice al cargar nuestra pagina(probado en firefox 11, chrome y ie 9.0 )

             ver demo

  ver demo