Los videos de pantalla completa son una tendencia y hay una buena razón para ello. Tener un video de fondo en su web amplifica el mensaje de su marca, le agrega un aspecto dinámico y se ve increíble. En este tutorial, haremos un video a pantalla completa usando el Etiqueta de vídeo HTML 5. También lo colocaremos en el fondo. Todo con solo usar CSS y HTML.
Antes de entrar en detalles, mira el resultado:
Configurando nuestro HTML para el contenedor de video de pantalla completa
Entonces, ahora que conocemos estas 2 reglas básicas, comencemos a configurar el HTML para nuestro video de fondo:
<div class="video-container">
<video autoplay muted loop poster="cake.jpg">
<source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
</div>
El elemento de video viene cargado con algunos atributos útiles que se pueden usar para controlar cómo y cuándo se reproduce un video:
- Auto-reproducción: El atributo booleano de reproducción automática garantiza que el video de pantalla completa se reproduzca automáticamente en segundo plano.
- Control S: No habrá controles de reproducción/detención/pausa para nuestro video de fondo, por lo que hemos omitido el atributo de controles. Este es un atributo booleano.
- Apagado: El atributo silenciado sirve el video de pantalla completa sin ningún sonido.
- Bucle: Queremos que nuestro video de fondo se reproduzca automáticamente en un bucle, por lo que también usamos el atributo de bucle. El atributo de bucle también es un valor booleano.
- Póster: Por último, el atributo del póster mostrará una imagen al usuario mientras se carga el video de fondo. Por ejemplo, si un usuario tiene una velocidad de Internet lenta, podría ser una mejor opción publicar una imagen. También mostrará una imagen en caso de que el video de pantalla completa no se muestre en absoluto. Esto puede suceder cuando el elemento de video HTML5 no es compatible con un navegador en particular.
Usando CSS para hacer el video a pantalla completa
Ahora que tenemos el elemento de video colocado dentro de nuestro HTML, configuremos el CSS para él. Nos gustaría que el video cubriera toda la página.
video{
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
top: 0;
left: 0;
}Nuestro video de pantalla completa CSS tiene una posición de fijo, por lo que se elimina del flujo normal del documento HTML.
Además, tiene sus propiedades superior e izquierda establecidas en 0, por lo que se coloca en la esquina superior izquierda del cuerpo de la página web. La propiedad de ajuste de objeto dictará cómo se debe cambiar el tamaño del video de pantalla completa. El valor de portada garantizará que el video mantenga su relación de aspecto y no se distorsione. La imagen se recortará para ajustarse al ancho del video. Está configurado al 100% ya que queremos que abarque el video del documento. Finalmente, las propiedades de alto y ancho de nuestro video de pantalla completa tienen un valor de 100 para garantizar que el alto y el ancho del video se escalan adecuadamente para mostrar todo el contenido del video.
¡Ese es todo el CSS que necesitamos para mostrar un video a pantalla completa en nuestra página! Dicho esto, ahora podemos proceder a agregar otras cosas para superponerlas en la parte superior de nuestro video de pantalla completa, como encabezados, botones y otros elementos.
Superponer elementos encima del video de fondo
Ahora agreguemos un encabezado y un botón en la parte superior del video de pantalla completa, como vemos en muchas páginas web que usan videos de fondo. La clave aquí es que cualquier elemento colocado encima del video debe tener un alto contraste. Esto los hará fácilmente visibles contra el video de fondo, lo que conducirá a una mejor experiencia y accesibilidad del usuario. Para hacer esto, crearemos un elemento div separado que será el padre de nuestro encabezado y botón:
<div class="header">
<h1>Blueberry Cheesecake</h1>
<button>Recipe here</button>
</div>
En este momento, esto aparecería debajo del video de pantalla completa, no en el frente. Tenemos que aplicar algunos cambios más al elemento del encabezado para colocarlo sobre el video de fondo CSS:
.header {
position: relative;
height: 100vh;
text-align: center;
justify-content: center;
}Hemos establecido una posición relativa para el elemento de encabezado para que se coloque sobre el elemento de video de posición fija. También estamos usando hei“ght:100% en el elemento de encabezado para asegurarnos de que nuestra imagen ocupa toda la altura de la pantalla.
Video de pantalla completa CSS Responsive: ¿realmente lo necesitamos?
Hoy en día muchas personas navegan por la web desde sus teléfonos móviles. Si ha configurado un video de fondo CSS en su sitio web, es posible que se pregunte cómo hacerlo receptivo.
Bueno, personalmente pensamos que reproducir un video de fondo en una página web puede no ser una buena idea si el usuario está navegando por la página en su móvil. Hagámonos nuevamente la pregunta clave: ¿por qué elegimos tener un video de pantalla completa desde el principio? Porque queremos impresionar al usuario, captar su atención y brindarle una experiencia de usuario increíble. ¿Vamos a conseguir este objetivo en una pequeña pantalla de móvil? Me temo que no. Además, los cargos por datos y los tiempos de carga también son algo a tener en cuenta.
Sin embargo, esto es solo una opinión personal y la decisión final depende de la razón subyacente por la que tienes que poner un video de pantalla completa en tu web. Es por eso que en este tutorial también tendremos en cuenta que es posible que desee configurar un video de pantalla completa receptivo.
Reproducir un video receptivo a pantalla completa en un dispositivo móvil
Si desea reproducir un video de fondo receptivo en un dispositivo móvil, agregue el atributo de reproducción en línea al elemento de video. Esto reproducirá un video incrustado en dispositivos móviles. También debe usar los atributos de reproducción automática y silenciada junto con juegos en línea.
<div class="video-container">
<video autoplay muted loop playsinline poster="cake.jpg">
<source src="https://cdn.videvo.net/videvo_files/video/free/2019-07/small_watermarked/Raw_Vegan_Blueberry_Cake_Cut_Birthday_Cooking_preview.webm" type="video/webm">
</div>
Esto reproducirá automáticamente el video de pantalla completa receptivo en los navegadores móviles en bucle como un GIF.
Reemplazar el video de pantalla completa con una imagen en el móvil
Si prefiere eliminar el video de fondo en los móviles, le sugerimos reemplazarlo con una imagen. Para lidiar con esto, podemos usar una consulta de medios:
@media screen and (max-width: 768px) {
html{
background: url("https://images.unsplash.com/photo-1620222071550-a5c7f8b600ed?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDY4NDIyNA&ixlib=rb-1.2.1&q=80&w=400");
background-size: cover;
}
.video-container{
display:none;
}
La consulta de medios detecta si el tamaño de la pantalla de visualización es inferior a 768 píxeles de ancho. Si es así, ocultamos el contenedor de video y, en su lugar, mostramos una imagen estática. El encabezado y el botón ahora se mostrarán en la parte superior de la imagen de fondo.
2 errores comunes que se deben evitar en los videos de fondo CSS
¡Ya casi está listo para crear su propio video a pantalla completa! Sin embargo, antes de finalizar este tutorial, queremos advertir sobre algunos errores comunes al usar videos de fondo.
Los videos a pantalla completa pueden deleitar a sus usuarios, pero también pueden ser su peor pesadilla. ¿Alguna vez ha ingresado a un sitio web donde el video de fondo es tan ruidoso que debe abandonar ese sitio de inmediato? Estoy seguro de que tuviste ese tipo de experiencia… Por supuesto, no queremos causar un impacto tan negativo en nuestros usuarios. Es por eso que debemos recordar 2 reglas de oro simples al configurar un video de pantalla completa.
Silencio por favor
Queremos que el usuario mantenga la calma y la relajación mientras navega por nuestra web. No asustarlo y hacerlo huir. Siempre recomendamos silenciar cualquier video de fondo que coloque en su sitio web. Puede darle al usuario la opción de activarlo pero mantenerlo silenciado de manera predeterminada.
Cuanto más corto, mejor
El tiempo es oro. No “robar” este tesoro del usuario. Nuestro video no debe durar más de 20-30 segundos. Un video más largo puede aburrir al usuario y darle razones para abandonar su sitio web en busca de otra cosa que no le haga perder su valioso tiempo.
