COLOCAR UN VIDEO DE YOUTUBE COMO FONDO DE MI 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 😀 ) , 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

Un comentario el “COLOCAR UN VIDEO DE YOUTUBE COMO FONDO DE MI PAGINA WEB

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s