SummArg | Cursos y recursos para webmasters

26/01/2012

¿Cómo se inserta un video como fondo -background- de una página web?

Colocar como fondo de un website un video puede llegar a resultar interesante si se escoge bien el video y se diseña el contenido del sitio de forma que asegure la legibilidad del contenido. No es un recurso que se recomiende en sitios de gran movimiento de usuarios, sino en sitios institucionales en donde se desee informar sobre una marca o producto en particular.

Utilizar un video .swf como fondo

Deberemos insertar el video haciendo uso de la librería swfobject que pueden descargar desde aquí: http://code.google.com/p/swfobject/

Para que el video encaje exactamente a lo largo y ancho de la página (posiblemente perdiendo la proporción) se deberá insertar el parámetro scale con valor “exactFit”. Es importante no olvidar colocar el parámetro wmode con valor “transparent”.Entre etiquetas <head> insertamos el siguiente código:

<script type="text/javascript" src="/scripts/swfobject.js"></script>
 <script type="text/javascript">swfobject.registerObject ("flashcontent","9");</script>

Debajo de la etiqueta <body> colocamos el video de la siguiente manera:

<object id="flashcontent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-323353540022" width="100%" height="100%">
 <param name="movie" value="fondo.swf" />
 <param name="scale" value="exactFit" />
 <param name="wmode" value="transparent" />
 <!--[if !IE]>-->
 <object type="application/x-shockwave-flash" data="fondo.swf" width="100%" height="100%">
 <param name="scale" value="exactFit" />
 <param name="wmode" value="transparent" />
 <!--<![endif]-->
 <img src="/images/fondo.jpg" width="100%"/>
 <!--[if !IE]>-->
 </object>
 <!--<![endif]-->
 </object>

Y en el CSS debemos insertar el siguiente código:

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#flashcontent {
height: 100%;
z-index:-9999;
position:fixed;
margin: 0 auto;
}

Luego creamos un div en donde colocar contenidos y le asignamos un z-index de 200. Funcionará en la mayoría de los navegadores y se puede aplicar a cualquier website.

Fuentes: http://wordpress.org/support/topic/flash-video-background-for-wordpress-theme y http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/

HTML 5 jQuery VideoBG

Este plugin para jQuery permite un video HTML5 como fondo de un website, o como fondo de cualquier div. Para el caso de que el navegador no soporte HTML5, reemplaza el video con una imagen. Recomienda cargar el video en formatos .ovg (Firefox 3.5 y Opera 10.5), .mp4 (para IE9, Safari y Chrome) y en .webm para Firefox 4 o superior.

Permite configurar autoplay, loop, scale, position, opacity, z-index, alto y ancho, entre otros.

Ejemplo de uso

Entre etiquetas <head> insertar el siguiente código:

<script type="text/javascript" src="jquery-1.5.1.js"></script>
 <script type="text/javascript" src="jquery.videoBG.js"></script>
 <script type="text/javascript">
 $('body').videoBG({
 position:"fixed",
 zIndex:0,
 mp4:'assets/christmas_snow.mp4',
 ogv:'assets/christmas_snow.ogv',
 webm:'assets/christmas_snow.webm',
 poster:'assets/christmas_snow.jpg',
 opacity:1
 });
 </script>

jQuery VideoBG

jQuery HTML5 video background

Dentro de la misma línea que el anterior, tenemos este script creado por George Paterson y que va por su versión 1.1.1. Permite controlar varios parámetros enunciados en el anterior y además nos permite insertar con facilidad un control para que el usuario pueda pausar o silenciar el video cuando lo desee. Permite ejecutar funciones mientras se carga el video o una vez cargado.

Demo y documentación | Descarga

jQuery Tubular

Tubular nos pone las cosas muy fáciles permitiéndonos utilizar cualquier video publicado en YouTube como fondo de nuestra web. Tras su descarga debemos insertar el siguiente código entre etiquetas <head>:

<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="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

Y finalmente, insertamos el siguiente código indicando la url del video que elegimos

<script type="text/javascript">
 $().ready(function() {
 $('body').tubular('someYTid','wrapper'); // reemplazar someYTid por el ID del video y wrapper por el ID del contenedor
 });
 </script>

Descargar | Demo

Dejar un comentario

  1. MacGyver

    Que extraño, el 3er. código no me permite poner el video totalmente como fondo pese a tener la llamada wmode=transparent y usarlo en el 1er. z-index, aun asi hay objetos que se pierden o_O

  2. Felipe

    Gracias me sirvió mucho.

Dejar un comentario