Como Adicionar um Video em Background usando HTML e CSS

Neste artigo, vamos aprender como adicionar um video em Background usando HTML e CSS.

Este artifício deixa o site super moderno e dinâmico.

Com a prática executada no vídeo, vamos poder revisar muitos conceitos importantes sobre HTML5 e CSS. Algumas propriedades legais, além de explicações que valem realmente a sua atenção.

Confira abaixo o vídeo!

Conteúdo

Como Adicionar um Video em Background
Dicionário CSS
Códigos usados no Vídeo
Conclusão

Como Adicionar um Video em Background

Dicionário CSS

Confira abaixo, um mini dicionário com algumas propriedades usadas no projeto.

z-index: posição do elemento na pilha.
object-fit: ajuda na proporção dos elementos e imagens.
text-transform: Transforma a apresentação das Fontes.
overflow: Auxilia na exibição de imagens que são maiores do que suas molduras.
display: Contribui na exibição do elemento e o espaço reservado para ele.

Códigos usados no Vídeo

O nosso index.html ficou da seguinte maneira:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
    <title>Background</title>
</head>

<body>
    <div class="banner">
        <video autoplay muted loop>
            <source src="/movie/coffee.mp4" type="video/mp4">
        </video>
        <div class="content">
            <h1>Video em Background</h1>
            <p>É assim que fica um parágrafo</p>
            <a href="#"><img src="/img/instagram.png" alt="Instagram"></a>
            <a href="#"><img src="/img/whatsapp.png" alt="WhatsApp"></a>
        </div>
    </div>

</body>

</html>

E o nosso Style.css resultou no código abaixo:

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600&display=swap");

body {
  margin: 0;
  padding: 0;
  font-family: "Big Shoulders Display", cursive;
  height: 100px;
}

.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner video {
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
}

.banner .content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.banner .content h1 {
  margin: 0;
  padding: 0;
  font-size: 5.5em;
  text-transform: uppercase;
  color: #ffff;
}

.banner .content p {
  font-size: 1.5em;
  color: #ffff;
}

.banner .content img {
  width: 40px;
  height: 40px;
}