Colocar um video como Background utilizando HTML + CSS

Estrutura HTML:

<div class="video-container">
  <!-- Video will be placed here -->
</div>

Estilo CSS:

Aplique CSS ao contêiner para definir o vídeo como plano de fundo.

.video-container {
  position: relative;
  width: 100%; /* Set width of the container */
  height: 400px; /* Set height of the container */
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
}

Incorporando o vídeo:

Coloque o elemento <video> dentro do contêiner e especifique o arquivo de vídeo MP4 como fonte.

<div class="video-container">
  <video autoplay muted loop>
    <source src="your-video-file.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Certifique-se de substituir “your-video-file.mp4” pelo caminho correto para o seu arquivo de vídeo.

Explicação do CSS:

.video-container é definido como um contêiner para o vídeo com dimensões específicas.
O elemento <video> está absolutamente posicionado dentro do container para atuar como plano de fundo, cobrindo toda a área.
Os atributos de reprodução automática, mudo e loop são usados ​​para reproduzir automaticamente o vídeo, silenciá-lo e fazê-lo repetir continuamente.
Ajuste a largura, a altura e outras propriedades CSS do contêiner para se adequar ao layout e às dimensões do vídeo conforme necessário.

Lembre-se de que, embora a reprodução automática de vídeos possa chamar a atenção, é importante considerar a usabilidade e a acessibilidade ao implementar esses recursos. Além disso, alguns dispositivos móveis restringem a reprodução automática de vídeos para conservar dados e vida útil da bateria, por isso é uma boa prática fornecer conteúdo ou controles alternativos para o vídeo.