Video de fondo en HTML5

Video de fondo en HTML5

Desde hace una temporada, está muy en boga en páginas relacionadas con la música y con la moda utilizar como fondo de la web un vídeo.

Este efecto tan molón es, curiosamente, extremadamente sencillo de llevar a cabo, pero (como todo) si no sabes “que botón tocar” puede ser tarea imposible. Vamos a hacerlo poco a poco.

Usando Youtube para nuestro video de fondo en HTML5

En HTML5 tenemos la maravillosa etiqueta video, que nos permite insertar vídeos en nuestra web. Sin embargo, debido a que cada navegador necesita un formato diferente, si queremos utilizar esta etiqueta tendremos que tener nuestro video en los 3 formatos soportados para asegurarnos que se vea bien en los navegadores.

Este “problema” lo podemos solucionar utilizando Youtube como reproductor de video, puesto que ya se encarga Youtube de realizar la conversión del video al formato adecuado ahorrándonos nosotros esos quebraderos de cabeza.

Así pues, vamos a utilizar un video que existe en Youtube, concretamente utilizaremos el videoclip “El Príncipe” de la banda española “Saurom

El código para embeber el video desde youtube es:

https://www.youtube.com/embed/Xxus7tBHxtc

HTML5 con video de Youtube de fondo

Para poner el video de fondo debemos tener en cuenta, además de la URL, lo siguiente:

  1. Queremos eliminar toda la información posible que nos mete Youtube.
  2. Queremos se que autoreproduzca.
  3. Queremos que ocupe el 100% de la pantalla.

Queremos eliminar toda la información posible que nos mete Youtube.

Cuando insertas un video de Youtube en tu web, tienes una serie de info incluida tales como los controles del video, la info del video (la barra negra superior con el título y el link para compartir en redes), videos relacionados, etc.

Gracias a una serie de variables enviadas por query a Youtube podemos eliminar casi toda la info. La url de nuestro video de fondo la debemos modificar para que quede así:

http://www.youtube.com/embed/Xxus7tBHxtc?rel=0&controls=0&showinfo=0&html5=1&allowfullscreen=true&wmode=transparent

Queremos que se autoreproduzca.

Como el video va a estar de fondo, tendremos que lograr que se inicie la reproducción de forma automática, ya que de lo contrario hasta que el usuario clique en el video no empezará la reproducción… y teniendo en cuenta que lo pondremos de fondo, será complicado que se le ocurra pinchar.

Al igual que en el punto anterior, Youtube permite pasar un query autoplay, por lo que nuestra URL del video de fondo ha de ser:

http://www.youtube.com/embed/Xxus7tBHxtc?rel=0&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&wmode=transparent

Queremos que ocupe el 100% de la pantalla.

Lo más importante de todo… queremos que nuestro video de fondo ocupe el 100% de la pantalla, puesto que si lo queremos de fondo ha de ser así…

Bien, para esto no tenemos más que recurrir al viejo CSS2.1 nada de nuevas reglas propias de CSS3, esto existe desde hace muchos años!!

Para que el iframe de Youtube ocupe el 100% sólo deberemos especificar en nuestro CSS que el width y height es del 100% con el añadido del position.

La propiedad CSS position permite indicar si un elemento tiene una posición static, relative, absolute, fixed. En la siempre recurrida w3schools tenemos una completa definición del position

En la web de W3Schools podemos ver que la position “fixed” significa que la etiqueta se posicionará de forma relativa a la ventana del navegador… o sea, lo que queremos.

Así pues, ancho y alto al 100% y posición fixed para que nuestro video de fondo ocupe el 100%, ya lo tenemos todo!! Sólo falta codificar.

Código HTML y CSS con video de fondo

El código CSS

body {
	margin: 0;
	padding: 0;
}

#video-background {
	height: 100%;
	position: fixed;
	width: 100%;
}

El código HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link href="./video-1.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<iframe id="video-background" width="560" height="315" src="//www.youtube.com/embed/Xxus7tBHxtc?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
	</body>
</html>

Demo online

https://rolandocaldas.com/ejemplos-blog/video-background/video-1.html

Nuestro video de fondo al 100%

Nuestro video de fondo al 100%

Escribiendo encima de nuestro vídeo de fondo

Ya tenemos nuestro HTML con un vídeo de Youtube reproduciéndose! El siguiente paso es poder colocar las capas de nuestra web encima del video.

Si analizamos nuestro HTML, realmente no hemos puesto un video de fondo, sólo hemos colocado una capa y hemos hecho que ocupe el 100%. Si agregamos una capa nueva, debajo de nuestro iframe de youtube con el texto de la web, de esta forma:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link href="./video-1.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<iframe id="video-background" width="560" height="315" src="//www.youtube.com/embed/Xxus7tBHxtc?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		<div>
			Hola mundo!!
		</div>
	</body>
</html>

Podremos comprobar que, lamentablemente, no nos aparece, puesto que el video de fondo está ocupando todo el espacio.

https://rolandocaldas.com/ejemplos-blog/video-background/video-2.html

Oh, no sale nuestro texto :(

Oh, no sale nuestro texto 🙁

Para solucionar este problema, recurrimos a otra propiedad de CSS que lleva ahí muchos años: z-index.

z-index es una propiedad maravillosa que nos permite manipular “la jerarquía de capas”. Esta propiedad funcionará en elementos que tengan position absolute, relative o fixed así pues podemos utilizarla en nuestro iframe de YouTube.

Lo que debemos hacer es manipular nuestro CSS para que el #video-background tenga z-index de -100, asegurándonos así que quede por debajo del resto de capas de la web, de forma que lograremos nuestro deseado efecto background.

#video-background {
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: -100;
}

Por último, vamos a darle un poco de estilo a nuestra caja de texto y utilizaremos jQuery para hacer que el texto aparezca pasados 5 segundos, dando así un poco de gracia visual a nuestro contenido.

El fichero video-3.css

* {
	margin: 0;
	padding: 0;
}

#content {
	background: #fff; /* Para Internet Explorer */
 	background: rgba(255,255,255,.5);
	border-radius: 10px;
	box-shadow: 5px 5px 10px rgb(200,200,200);
	font-size: 2rem;
	margin: 0 auto;
	padding: 50px 0;
	text-align: center;
	text-shadow: 2px 2px 4px rgb(255, 255, 255);
	width: 80%;
}

#foo {
	display: none;
	position: absolute;
	top: 20%;				
	width: 100%;
}

#video-background {
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: -100;
}

El fichero video-3.js

$(document).ready(function() {
	$( "#foo" ).slideUp( 300 ).delay( 10000 ).fadeIn( 400 );
});

El fichero video-3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link href="./video-3.css" type="text/css" rel="stylesheet" />
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="./video-3.js"></script>
	</head>
	<body>
		<iframe id="video-background" width="560" height="315" src="//www.youtube.com/embed/Xxus7tBHxtc?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
		<div id="foo">
			<div id="content">Hola Mundo!!</div>
		</div>
	</body>
</html>

Resultado final

Ya sólo nos queda ver el resultado final pinchando en el siguiente enlace:

https://rolandocaldas.com/ejemplos-blog/video-background/video-3.html

Mola eh! Y es extremadamente sencillo!!

Video de fondo y texto por encima!!

Video de fondo y texto por encima!!

Usando etiqueta video en vez de YouTube

Si quieres utilizar la etiqueta video en vez de Youtube, sólo se debe cambiar el iframe por el siguiente código HTML:

<video id="video-background" width="560" height="315" autoplay preload muted>
  <source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="video.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="video.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

El video de fondo sin sonido por dios!!!

Algo que puede ser muy molesto para algunas personas es que el video de fondo se reproduzca con sonido. Esto puede arreglarse tanto si usas youtube como si usas la etiqueta video

Etiqueta video sin sonido

Super sencillo, sólo agregar la propiedad para el mute:

Iframe youtube sin sonido

Esto ya es más complicado… no tenemos una query que nos permita hacer el mute… pero sí podemos con Javascript. En https://developers.google.com/youtube/iframe_api_reference tenemos una completa explicación del iframe_api para youtube, está tan bien explicada que creo no es necesario comentarla.

De todas formas, si alguien tiene problemas me lo puede comentar y creo una entrada específica sobre cómo utilizar el iframe_api 😉

Conclusión

¿A qué no pensabas que algo tan molón es tan sencillo de hacer? Yeah fácil fácil… y responsive!!

50 pensamientos en “Video de fondo en HTML5

  1. Guapo y bien explicado!!, además de espectacular según que video.

    Sólo un pero, cuando lo haces en local el video si se te reproduce ocupando todo el área de la pantalla pero cuando lo haces con el video desde YouTube, independientemente del tamaño que le pongas en las etiquetas, siempre aparecen dos franjas negras a los lados.

    Me imagino que será porque la relación de aspecto por defecto es 4:3 y necesitamos 16:9 ¿o no?

    ¿que opinas?¿conoces la solución?

    1. Rolando, tengo una duda a ver si me la puedes solucionar, si pongo el vídeo desde local cuanto debería pesar para que no me tarde mucho en cargar, que si no los usuarios al ver que tarda la pagina se irán.

      vendedor, con Vimeo me pasa lo mismo las franjas negras no las puedo quitar, solo se quitan si lo haces en local

      1. Rolando Caldas
        Responder

        Hola David… en local no debes tener nunca un video, te va a tardar sí o sí… deberías alojarlo en algún servicio de hosting y optimizar el video para web de forma que pese lo menos posible… incluso plantearse diferentes versiones en base al dispositivo de acceso para utilizar videos en baja resolución cuando la pantalla no vaya a aprovechar resoluciones más grandes…

    2. Rolando Caldas
      Responder

      Efectivamente… las franjas negras es por el aspect ratio… es algo que youtube hace automáticamente. En la ayuda de youtube (https://support.google.com/youtube/answer/1722171?hl=es-ES) se comenta este detalle y hay un enlace dónde habla de metaetiquetas a incluir en el video para “controlar” estos ajustes (https://support.google.com/youtube/answer/146402?hl=es-es), no lo he probado así que tampoco sé si va a no (ya en temas de video estoy más pez).

      Al ser algo que hace Youtube automáticamente, la forma que se me ocurre de “eliminar las barras”, es manipular el alto del iframe del video con javascript… de forma que en cada window.resize se obtenga el valor del ancho de la ventana (que será del 100%) y se calcule en base a la proporción del video (que la tenemos que conocer), la altura que debe tener el iframe… se establece esa altura y, de esta forma eliminaremos las barras negras… aunque cuando la proporción de la ventana sea diferente a la del video siempre tendremos parte del video que quede oculto porque su altura será mayor a la altura de la ventana.

  2. Si me lo temía, demasiado lío para mostrar un video de fondo, ya he aprovechado y me he creado una página para mis cosas y he aprovechado para cambiar dinámicamente tanto el fondo cómo las hojas css asociadas, cómo veis las dimensiones del video dependerán del dispositivo donde lo visualicéis. por si queréis cotillear, http://www.versionesbeta.besaba.com

  3. Amigo yo lo hice de esta forma

    ……..

    Localmente funciona bien pero cuando lo subo al hosting en el navegador queda muy lento y Hay una parte que se detiene a quisiera que me ayudaras la verdad soy nuevo en Html. el video pesa 4,51 MB

    1. Hola daniel, ¿el video lo cargas siempre desde youtube? Los problemas que tienes pueden ser normales. Por un lado, según los recursos del equipo desde el que ves la página, el vídeo irá fluido o no. En un portátil que tengo, los videos a pantalla completa vistos desde web siempre me van a saltos porque no es capaz de reproducirlo fluido… si ocupan menos va bien. Esto en equipos con mejores recursos no pasa, de hecho una temporada spotify tuvo video de fondo y ne mi portátil no había manera de verlo bien, iba a saltos muy grandes. También, el video se reproduce descargando el contenido al momento… si tienes problemas de conexión puede detenerse el video porque no descarga la continuación. Yo, la demo 3 (http://rolandocaldas.com/ejemplos-blog/video-background/video-3.html) la reproduzco sin problemas, no se corta etc.

      Sobre el peso del video pasa igual, aunque en el ejemplo utilicé un video no optimizado, normalmente para poner vídeos de fondo, se preparan vídeos de corta duración, que puedan reproducirse bien en bucle y con una calidad ajustada, para que no haya problemas con el almacenamiento en caché.

      1. Gracias Rolando! el video no lo estoy cargando desde YOUTUBE lo estoy haciendo de esta forma

        … pero cuando la subo al hosting hay queda muy lento.

        1. Gracias Rolando! el video no lo estoy cargando desde YOUTUBE lo estoy haciendo de esta forma con la etiqueta video

          pero cuando la subo al hosting hay queda muy lento.

          video id=”video1″ loop autoplay preload poster=”images/negro.jpg”
          source src=”videos/video1.mp4″ type=”video/mp4″
          source src=”videos/video1.webm” type=”video/webm”
          source src=”videos/video1.ogv” type=”video/ogg”
          video

          1. Vale… ahí ya tienes muchos factores que pueden ser los causantes. Por un lado, que el formato de vídeo usado no esté “bien codificado” y genere que tras X segundos se pare (ya nos pasó en alguna ocasión), por ejemplo que se pare en IE, Firefox, pero vaya bien en Chrome. Luego, que al tener el video en tu hosting, si hay tiempos de espera largos o no está preparado para servir vídeos, la calidad del stream puede ser deficiente e ir mal… La idea de usar Youtube en vez de un host propio es para evitar problemas porque ya se encarga Youtube de codificar correctamente tu video en todos los formatos y, además, sirve el video bajo una serie de servidores optimizados para esa finalidad, por lo que el resultado casi siempre va a ser mejor que si lo usas desde un host propio que, por ejemplo, no tendrá tanta salida de datos que youtube. Yo de ti haría la prueba con Youtube para comparar resultados 😉

  4. Hola, Rolando. Llevaba varias semanas buscando sobre esto, aún no lo he puesto en práctica pero es lo que buscaba, algo en la línea de jamesblakemusic.com, así que muchas muchas gracias por tu trabajo. Quisiera hacerte una pregunta: ¿Es viable que el sitio web que escribamos encima de nuestro vídeo de fondo sea a través de WordPress? Es decir, ¿puedo poner una barra de menús y una plantilla de WordPress que yo personalice encima del vídeo, al estilo del enlace que adjunto? Muchas gracias por tu tiempo y tu ayuda y enhorabuena por tu trabajo. Un saludo.

    1. Hola David!

      Sí claro, es posible hacerlo en un wordpress. Para poner un video de fondo en wordpress, sólo tienes que hacerlo vía theme. En el theme que uses tendrás un header.php y un footer.php. En el header.php debes colocar el código HTML del video, justo después de la apertura del body y, acto seguido, el la etiqueta de apertura del div que contendrá el texto que sale por encima. De esta manera, lo que haces es que todo el WordPress se cargue dentro del div que se mostrará por encima del video. Luego vas al footer.php y antes del cierre del body, cierras la etiqueta div que dejaste abierta en el header.php y así ya tienes el video de fondo y luego una etiqueta div que se mostrará por encima del video y que contiene todo el HTML resultante de tu WordPress.

      saludos!

  5. Hola , ,kme ha sido de mucha ayuda este tutorial , ahora me gsuatria saber como puedo mover el tiempo de espera para que aparesca la información , segun yo es en el js , pero no hayo forma de prolongar un poco la activación y aparición de la información -. gracias

  6. Buenas Luis Ramos,

    Partiendo del ejemplo que más se ajusta a lo que preguntas (http://rolandocaldas.com/ejemplos-blog/video-background/video-3.html) en cuyo código fuente se carga el siguiente fichero JS:

    http://rolandocaldas.com/ejemplos-blog/video-background/video-3.js

    En ese JS, verás que tienes un .delay( 10000 ). Este delay es el que hace que la caja de texto tarde 10 segundos en aparecer desde la carga de la página. Si quieres aumentar este tiempo, sólo debes cambiar el 10000 por el valor deseado, teniendo en cuenta que un segundo es igual a 1000

    saludos!

  7. Hola, gracias por la info es muy útil, quisiera saber si hay alguna forma de que el vídeo se reproduzca todo el tiempo en un loop, estoy usando el video desde youtube, alguna idea?, desde ya gracias. Saludos

  8. Rolando tu ejemplo esta de maravilla, he copiado y ejecutado al pie de la letra tu tutorial, mi video esta en youtube y solo dura 7 segundos, lo quiero usar como intro a una web, y deseaba poner un “Skip intro” o “Entrar” sobre el video en lugar del ya conocido “Hola mundo”, el caso es que por algún motivo que desconozco y que ya me tiene al borde de la locura, el video se reproduce a fullscreen pero nunca sale ni el “Hola mundo” y estoy desesperado. Tu me puedes enviar a mi correo los 3 archivos (html, css y js) del proyecto para yo seguir intentando? Muchas gracias adelantadas

    1. Una preguntita: Las demos del artículo te van? Si no te van dime qué navegador utilizas. En cuanto tenga el código en github actualizo el artículo colocando la URL del repo.

      saludos!

  9. Hola Ronaldo, no sé nada de jquery y quiero hacer que tal como aparece el cartel de saludo desaparezca. Por lógica intuyo hacer esto: $( ‘#foo’ ).slidedown( 300 ).delay( 4000 ).fadeOut( 400 ); en la línea siguiente a la presentación pero no me funciona.
    Con javascript lo he conseguido fácil con esto:
    $(document).ready(function() {
    var f11 = document.getElementById(“foo”);
    f11.style.display = “inline”;
    setTimeout(‘ocultarF11()’, 4000);
    });
    function ocultarF11() {
    var f11 = document.getElementById(“foo”);
    f11.style.display = “none”;
    }
    Aunque no sé como hacer con javascript que aparezca y desaparezca poco.
    Saludos y buenísimo el tutorial.

  10. ¿Y si quisiera una lista de reproducción de Youtube a toda pantalla?? he intentado pasarle los mismos parámetros (después de la interrogación en la URL del enlace) que para un vídeo pero no valen. Y he intentado hacer un código con la API de Youtube para reproducir un vídeo y capturar el evento cuando termina un vídeo, pero solo lo sé hacer para un segundo vídeo cambiando con javascript el src=”…” del iframe. Pero no sé hacerlo para un tercer vídeo.
    También he escrito un código en javascript que cambia de vídeos cuando pasa un tiempo controlado con setTimeout(); pero si el usuario le da al vídeo y lo para y pasa el tiempo el vídeo salta al siguiente sin haber terminado el actual.
    ¿Como lo puedo hacer?
    Saludos

  11. Amigo, muchas gracias por esta publicación ya que me ha sido de muchísima ayuda. Mi consulta es la siguiente: Cuando veo tu pagina en una tablet el video no se reproduce automaticamente, si no que hay que darle play manualmente, hay alguna forma de que tambien en una tablet se reproduzca automaticamente?.

    1. Hola Luis, dice la API de Youtube literalmente:
      De modo que no en todos los dispositivos móviles se reproducirá automáticamente, porque no lo tienen permitido. Es por ahorro de consumo en la transmisión de datos.
      Saludos.
      PD: Por cierto gracias a este tutorial he hecho esto: http://www.annasimonmari.com/ con un par de líneas de código se hace un pedazo de web.

  12. Como podría hacer para tener el video de fondo o como principal en toda la web pero cuando oprima un link este pasa a un pantalla donde el video ocupa un recuadro de 320×240 pero lo mas importante es que como el video va en loop este siga en el punto donde estaba cuando estaba a full y si navego de una pantalla a otra el video permanezca y siga en su punto sin volverse a reiniciar. Gracias

  13. hola quisiera saber si podrías ayudarme ya que quiero poner musica de fondo en mi web pero q solo se reproduzca automaticamente en la pagina de inicio

  14. Habría probabilidad de poner el anuncio de hola de forma intermitente es decir que se mostrara, ocultara y después de unos minutos hiciera lo mismo de nuevo variando el mensaje?

  15. hola parce re bien muchas gracias me ayudaste bastante….pero tengo una duda si quiero que el vídeo que traigo de youtube inicie desde algún punto del vídeo, eso como lo hago
    Gracias!

  16. Buenos días.

    Queria hacer lo mismo que publicas en el artículo, pero con varios videos, es decir, que cuando finalice uno, se cargue el siguiente y cuando llegue al final vuelva al principio. UN carrusel de videos de fondo de pantalla.

  17. Buenas, el tuto genial!! solo tengo un problemilla y es que si dejo el Display:none; en tu caso no veo cuando cambia a visible, que lo hace el .js? porque no lo veo y a mi no me lo hace si lo dejo no aparece nunca :((

Deja un comentario