Author : Jhon
Publicado : 25 diciembre, 2019
Hace algún tiempo se puso de moda el poner un vídeo como fondo de webs, cajas, banners… hoy vamos a ver alguna de las formas de hacerlo, aunque básicamente son la misma, ya que solo cambia el que lo hagamos por medio de un vídeo propio con la etiqueta video de html5 o bien con un vídeo de youtube, aunque cada una de las dos formas tiene sus ventajas y desventajas…
Para empezar vamos a crear una estructura html y css donde introduciremos nuestros vídeos, de la siguiente forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#cabecera{
width: 100%;
height: 500px;
}
#video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: -10;
visibility: visible;
}
h2{
color:white;
text-shadow: 4px 4px 4px #333;
text-align: center;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="cabecera">
<!--Aquí pondremos el código del vídeo-->
<h2>Texto que aparece en la imagen</h2>
</div>
<h4>Texto de la web</h4>
</body>
</html>Como siempre digo, el poner el css dentro del código html es una mala práctica y debe de estar en una archivo exterior, pero por motivos didacticos lo introduzco dentro del script.
Como vemos en el html no hay demasiada complejidad; un div cabecera donde introducimos el vídeo y los elementos que deseemos y luego un texto que hace referencia al resto de la web.
En el CSS es donde esta la magia, aunque también es muy modificable, por ejemplo con este estilo en la cabecera vídeo, el vídeo nos ocupa todo el ancho de la web, si queremos hacer que nos ocupe la caja donde se encuentre tan solo hay que eliminar las etiquetas min-height y min-width y hacer unos leves cambios en el CSS
También podemos hacer que el vídeo ocupe toda la pantalla y no se mueva, haciendo que el texto pase por encima, cambiando la position por fixed en lugar de absolute.
Naturalmente le damos un z-index negativo para que se coloque detrás del resto de elementos y no pise al contenido.
Con todo esto ya tenemos el CSS listo, y tenemos multitud de posibilidades para jugar. Recuerdo que este minitutorial es más para inspirarnos que para hacer un copypaste…
Ahora bien para poder ilustrar bien el ejemplo vamos a jugar con la zona donde tenemos que poner un vídeo como fondo, podemos utilizar dos formas.
Esta forma tiene bastantes ventajas y es que con los atributos de la etiqueta podemos hacer que la imagen sea un loop (autoloop), que cargue o no cargue los controles (poniendo o quitando el atributo controls) y hacer que arranque de forma automática (autoplay), hacer que no reproduzca sonido (muted) incluso si queremos podemos poner una imagen de fondo si el vídeo no carga, el cual ademas se adapta perfectamente a nuestro tamaño de caja…
El problema es que cada navegador reconoce un tipo de vídeos, por lo que hay que ponerlos todos para que funcione, y eso puede ocuparnos mucho espacio en disco o bien que no dispongamos de todas las opciones…
Pero en definitiva el código es el siguiente:
<video id="video" loop autoplay preload muted>
<source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
<source src="video.ogg" type='video/ogg; codecs="theora,vorbis"' />
<source src="video.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>Podemos querer evitar subir el vídeo en diferentes formatos pudiendo trabajar directamente con un vídeo de youtube tomando el iframe que nos da youtube al compartir y añadiendole algunas variables por la URL del mismo que youtube identifica devolviendonos el vídeo con algunos cambios.
De tal manera que el body quedaría de la siguiente forma:
<body>
<iframe src="//www.youtube.com/embed/4t-JboICb28?rel=0&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&wmode=transparent" frameborder="0" allowfullscreen id="video">
</iframe>
<h2>Funky time!!!</h2>
</body>
Deja una respuesta