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:
- Queremos eliminar toda la información posible que nos mete Youtube.
- Queremos se que autoreproduzca.
- 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í:
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:
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&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&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%
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&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&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 🙁
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&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&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!!
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!!
Es posible hacerlo con un video de vimeo???
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?
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
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…
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.
gracias por toda la info!! me pongo esta tarde al lío
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
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
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é.
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.
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
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 😉
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.
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!
Muchas gracias, Rolando. Me has ayudado mucho, estoy deseando ponerlo en práctica.
Un abrazo.
¿
como puede hacer para que el vídeo se reproduzca sin audio?
En el mismo artículo lo dicen:
Cito:
«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 «
Excelente !
Me ha sido de mucha ayuda !
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
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!
Perecto. Se agradece la información y la sencillez en la explicación.
Saludos!
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
Buenas,
Según la documentación de youtube (https://developers.google.com/youtube/player_parameters#loop) se supone que con poner en la URL del video el parámetro &loop=1 aunque requiere que la URL incluya un playlist.
Muy buen tuto bro, gracias.
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
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!
Excelente contenido
¿Como puedo hacer que el vídeo de fondo se repita indefinidamente?
Emmanuel Figueroa
Vistacico a los comentarios del artículo 😉 http://rolandocaldas.com/html5/video-de-fondo-en-html5#comment-636
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.
Vale di con la tecla: $( «#foo» ).hide( 300 ).delay( 10000 ).fadeOut( 600 );
Buenas, cómo hago para que el video se reproduzca automáticamente en la máxima calidad?
¿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
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?.
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.
En mi web podeis bajar gratis los videos ya optimizados en formatos webM y mp4. Perfectos para fondo (background) de vustras paginas web.
http://yapa.es
Una pregunta , se puede ajustar para que se reproduzca con una resolucion dada
Hola, es cuestión de ajustar el ancho alto etc de #video-background
Buenisimo Rolando, tengo una web que lo que hace, es imitar el estilo de paypal, y lo unico que le falta, es el video de fondo 🙂
Hola rolando, solo decir que lo acabo de poner, y perfectamente, muchas gracias. genial 🙂
NO PUDE HACER NADA,MI VIDEO NO SE VE Y SI LO QUIERO PONER EN MP4 NO LO PUEDO VER
¡AYUDA!
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
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
Muy bien explicado, muchas gracias.
Hola.
Tengo una pregunta. ¿Donde va el código «El fichero video-3.js»? ¿En que parte del HTML?
Es posible añadir un botón de silencio en esta plantilla si no lo tiene prediseñado el programador
http://www.argentinaweb.es.
no debería ser un problema
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?
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!
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.
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 :((
me has solucionado la duda de como autoreproducir un video de fondo, thx 🙂
Aún estoy esperando el autoplay… creo que nunca sucederá…