Si desea atraer a los visitantes de su sitio por primera vez, tienes de 10 a 20 segundos. Para agregar algo de vida al contenido de su página, puede intentar agregar un video de fondo desde CSS.
Los fondos de video ocupan todo el ancho y la altura del área visible (en otras palabras, el área visible de la página) y agregan un atractivo visual para aumentar la participación. Puede colocar el contenido de la página destacada encima de este video; después de todo, es solo el fondo y su contenido es lo primero.
Los fondos de video pueden parecer una característica elegante, pero de hecho, son fáciles de implementar si sabes un poco de CSS. En esta guía, le mostraremos cómo agregar un fondo de video simple a pantalla completa a su sitio web, que puede personalizar y personalizar a su gusto.
¿Cómo crear un fondo de video de pantalla completa usando CSS?
Para mostrarle cómo crear fondos de video para su sitio web, le proporcionaremos un código que puede copiar y modificar según sus necesidades. También veremos el código en acción con algunos módulos CodePen receptivos en el fondo del video.
Comencemos con nuestro HTML. Primero pondremos un video de
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
Todos estos atributos son importantes para que el fondo funcione según lo previsto, así que repasemos cada uno de ellos:
- los IDENTIFICACIÓN El atributo se usa para diseñar nuestro elemento de video usando CSS. Esto es necesario para obtener el efecto de fondo de pantalla completa.
- los Reproducción automática el atributo inicia el video automáticamente cuando se carga la página.
- los círculo el atributo reproduce el video en un bucle infinito.
- los apagado el atributo apaga el sonido del video. En general, no debe reproducir audio de video en su sitio a menos que el usuario active el audio. Si lo hace, es un problema de accesibilidad y puede causar una experiencia de usuario desagradable.
- Finalmente póster la imagen se muestra en la pantalla mientras se carga el video, o en lugar del video si no se está cargando. Recomendamos que la imagen de su póster sea el primer cuadro de su película para una apariencia más fluida.
Después del elemento de video, agreguemos contenido de relleno HTML para ver cómo se ve el texto contra el fondo de nuestro video.
<h1>THIS IS A RIVER.</h1>
<h2>How majestic.</h2>
Después de terminar HTML, pasemos al negocio de CSS. Para convertir nuestro video normal en un video de fondo, agregue el siguiente código CSS:
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
Repasemos cada una de estas reglas para entender lo que hacen:
- altura: 100vw (ancho de la ventana gráfica) y ancho: 100vh (altura del área visible) hace que el video abarque todo el ancho y la altura del área visible.
- coincidencia de objetos: portada cambia automáticamente el tamaño del video de fondo para mantener su relación de aspecto original mientras llena la pantalla, recortando los bordes del video cuando sea necesario.
- puesto: establecido y lo siguiente izquierda, ley, Parte superiory abajo coloque el video en relación con la ventana gráfica y sepárelo del resto del contenido de la página. Esto mantiene el video en su lugar mientras el usuario se desplaza y permite colocar otro contenido sobre él.
- índice z coloca el fondo del video debajo del contenido que lo acompaña.
A continuación, agregaremos algo de estilo a nuestro otro contenido de la página. Para garantizar la accesibilidad, asegúrese de que el texto del video tenga un alto contraste de color con el fondo:
h1, h2 {
color: white;
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
}h1 {
font-size: 6rem;
margin-top: 30vh;
}
h2 { font-size: 3rem; }
En este punto, el fondo del video se mostrará muy bien. Pero aún no hemos cubierto los dispositivos móviles. Por lo general, es una buena idea evitar que los videos se reproduzcan automáticamente en dispositivos móviles, ya que los datos necesarios para reproducirlos son considerables y los usuarios no han solicitado reproducir el video en primer lugar.
En su lugar, agregaremos una consulta de medios para reemplazar el video con nuestra imagen de póster en pantallas de 750 píxeles de ancho o menos.
@media (max-width: 750px) {
#background-video { display: none; }
body {
background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
background-size: cover;
}
}
Cuando juntamos todo, obtenemos un fondo de video elegante que se escala con la pantalla y muestra la imagen en los dispositivos móviles. (Nota: Haga clic aquí para ver un ejemplo con reproducción de video.)
ver la pluma Fondo de vídeo 1 de Christina Perricone (@hubspot) en CódigoPen.
Si necesita más ayuda para aprender cómo hacer que este código funcione en su sitio, consulte este video tutorial de YouTube sobre CSS en segundo plano:
Añadir más contenido de página
Ya hemos colocado algunos titulares en la página para ver cómo se ve el contenido en el contexto del video.
Aun así, es probable que su página contenga más contenido que el video de fondo y algo de texto de título. Entonces agreguemos
ver la pluma Fondo de vídeo 2 de Christina Perricone (@hubspot) en CódigoPen.
dimos lo nuestro
Fondo de video CSS para captar la atención de su audiencia
La vida es corta y nadie quiere perder el tiempo en un sitio web normal. Con solo unas pocas líneas de código CSS, hemos creado una plantilla de fondo de video de página completa que puede personalizar para su audiencia.
El uso de un fondo de sitio para un video puede no ser la opción ideal para todos los sitios y, por lo general, no es posible en sitios móviles debido a su impacto en el rendimiento móvil. Sin embargo, si se hace correctamente, el fondo del video puede tener un impacto considerable y no es necesario ni siquiera presionar para reproducir.
Nota del editor: esta publicación se publicó originalmente en junio de 2021 y se actualizó para que sea completa.
