Quizás hayas tenido la necesidad de poner un vídeo de fondo en tu página web y no sabes por donde empezar, bueno en esta oportunidad te voy a enseñar una manera de como hacerlo.

Recuerda que hay mas de un camino para lograr este objetivo.

Necesitamos un vídeo extra grande para que se muestre de manera correcta en cualquier dispositivo ya sea de pantalla grande o pequeño, los formatos de vídeo que utilizare son mp4 y webm.

HTML

Estructura de HTML básico.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Vídeo de fondo</title>
</head>
<body>
  
 <!-- ******* VIDEO FONDO ******* -->
 <div class="contenido__video">
  <!-- 
    autoplay: propiedad para que se reproduzca una ves que carga la página
    loop: propiedad para el vídeo se repita infinitamente
    muted: propiedad para que el vídeo no emita sonido
    poster: propiedad que muestra una imagen hasta que cargue el vídeo 
  -->
  <video class="video" autoplay="autoplay" loop="loop" muted="muted" poster="images/artesano.png">
   <source src="video/artesano-1920x1080.mp4" type="video/mp4" />
   <source src="video/artesano-1920x1080.webm" type="video/webm" />
  </video>
 </div>
 
 <!-- Agrega tu código desde aquí -->

</body>
</html>

CSS

Agregalo en un archivo externo .css o en la etiqueta style

/* FONDO VIDEO */
.contenido__video{
 background: #7DD174;
 overflow: hidden;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
}

/* Estilos para la etiqueta "video" con la calse (.video)  */
.video{
 position: absolute;
 max-width: 300%;
 width: 100%;
}

/* media queries (personalizarlo a su antojo)*/
@media(max-width: 900px){
 .video{
  width: 150%;
 }
}
@media(max-width: 650px){
 .video{
  width: 280%;
 }
}
@media(max-width: 480px){
 .video{ 
  width: 300%;
 }
}

Demo

Ver la demostración en  GitHub

Visitar repositorio
Bueno amigos es todo el código algo sencillo, te pediría que si encuentras alguna mejora lo compartas en un comentario. Gracias.