Los videos son efectivos para captar la atención del usuario. Las personas responden y recuerdan imágenes a una velocidad más alta que cuando la misma información se presenta a través de palabras.
Nuestro cerebro procesa imágenes más rápido, sin mencionar que la experiencia de ver un video es divertida, emocionante y adictiva.
The “Hero” Background Video
Cuando hablamos de utilizar videos en un sitio web, no solo estamos hablando de cualquier tipo de video colocado en cualquier lugar. Este artículo trata específicamente de utilizar una tendencia moderna y popular en el diseño web llamada 'Hero Background Video'.
Suele ser lo primero que las personas ven al llegar al sitio, donde el contenido se presenta de una manera concisa y visualmente impactante.
Esta sección principal generalmente llena el ancho y la altura de toda la pantalla, dejando grandes espacios alrededor de un texto introductorio con un botón o enlace.
Ejemplo del uso del Video de Fondo
Estructurando el HTML
Imaginemos que queremos construir una página con un video de fondo a pantalla completa. Digamos que es una página de inicio para un nuevo producto, de modo que por encima de ese video, queremos un Título, un texto introductorio y un botón de llamada a la acción.
Como se vería el marcado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Nuevo Producto</title>
</head>
<body>
<div class="hero-header">
<video playsinline autoplay muted loop poster="" id="hero-video">
<source src="video.mp4">
</video>
<div class="hero-content">
<h1>
Nuevo Producto!
</h1>
<p>Adipisicing harum odit saepe libero vero Eius voluptatibus sunt doloribus cum nemo Exercitationem repudiandae maiores ex libero ipsa perferendis repudiandae Distinctio consequatur magnam culpa placeat modi dolor Quasi similique architecto?</p>
</div>
</div>
</body>
</html>Controlando el Video
playsinline
Esta propiedad mantiene el video junto a su contenido, importante para evitar que se abra en modo pantalla completa (especialmente en teléfonos móviles), donde estará ocupada por el video y nada más.
autoplay
Propiedad para que el video comience sin necesidad de presionar el botón "reproducir". Hay ciertos inconvenientes con esta propiedad.
Los navegadores web están desarrollando políticas más estrictas de reproducción automática con el fin de mejorar la experiencia del usuario, reducir el consumo de datos en redes limitadas. Estos cambios están destinados a dar un mayor control de la reproducción a los usuarios.
Las políticas de reproducción automática de Chrome son simples:
- La reproducción automática silenciada siempre está permitida. (Usaremos la propiedad muted).
- La reproducción automática con sonido está permitida si:
- El usuario ha interactuado con el dominio (click, tap, etc.).
- En escritorio, se ha cruzado el umbral del Índice de Interacción de Medios (Media Engagement Index) del usuario, lo que significa que el usuario ya ha reproducido video con sonido. - En móvil, el usuario ha añadido el sitio a la pantalla de inicio.
muted
Propiedad para silenciar el video. Esencial para la reproducción automática debido a los cambios de políticas comentadas anteriormente.
loop
Si se especifica, al llegar al final, el video comenzará a reproducirse de nuevo automáticamente en un bucle infinito.
poster
Imagen que se mostrará hasta que el video termine de cargarse y reproducirse. Tal vez lo mas adecuado para mostrar sería el primer cuadro del video o algo así como un logo o banner.
Definiendo los estilos
Recordemos, estamos interesados en un video a pantalla completa, por lo que debemos asegurarnos de que nuestros elementos html y body sean de pantalla completa. Nuestros estilos bases deberían verse así:
/*
* Reset
*/
html,
body,
div,
h1,
p,
a,
video {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
}
Posicionando los textos
Sabemos que queremos que nuestro contenido tenga capas, y eso significa que debemos usar la propiedad z-index. Nuestro video permanecerá en segundo plano y el texto al frente. Comencemos con eso:
.hero-header {
position: relative;
height: 650px;
overflow: hidden;
}
.hero-header > video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Agreguemos un poco más de estilo a nuestro contenido. Haremos que el encabezado sea grande, y le daremos un estilo al botón.
.hero-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
}
.hero-content {
position: absolute;
z-index: 10;
width: 100%;
max-width: 960px;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.hero-content > h1 {
font-size: 45px;
font-weight: 700;
margin-bottom: 15px;
}
.hero-content > p {
font-weight: 300;
font-size: 18px;
line-height: 1.75;
margin-bottom: 30px;
}
.hero-content > .btn {
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
color: #333;
background-color: #fff;
border: 0;
padding: 20px 50px;
display: inline-block;
text-align: center;
}
Por último, para mejorar el contraste añadiremos una capa de color oscuro semitransparente con pseudo elementos:
.hero-header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
}Conclusiones
Ahora estas listo para agregar un video de fondo a tu sitio web. La recomendación que te damos es que no abuses de este recurso, ya que si el tamaño y la calidad del video no está optimizado para la web, puede pasar que se esté mostrando en una calidad muy pobre, o por el contrario, con tanta calidad que el peso del mismo hace eterna su descarga.
Hay que saber lograr el mejor equilibrio entre calidad y velocidad y que se logre el impacto buscado al integrarlo armoniosamente con el diseño de la web.
Donde encontrar Videos para usar en tus sitios.
Aquí dejamos unos sitios donde poder encontrar videos para usar de manera gratuita:
¿Listo para contactarnos?
Envíanos un mensaje y nos pondremos en contacto contigo.
