HTML:
<video id="background-video" autoplay loop muted playsinline>
<source src="https://webship.com.br/video/background.mp4" type="video/mp4" />
</video>
CSS:
#background-video {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
}
Vídeo background cover :
/* É só adicionionar a propriedade object-fit: cover; */
#background-video {
object-fit: cover;
}Exemplo adicionando conteúdo na página com o vídeo de backgroud.
<head>
<style>
* {
outline: 0;
box-sizing: border-box;
}
body {
color: #D0D0D0;
text-shadow:
1px 1px rgba(0, 0, 0, 0.20),
0 0 1px rgba(0, 0, 0, 0.20),
-1px -1px rgba(0, 0, 0, 0.20);
font-family: sans-serif;
font-size: 1.15rem;
}
body, h1, h2 {
margin: 0 0;
}
header {
position: relative;
padding: 20px 20px 30px;
width: 100%;
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.40);
}
h2 {
text-align: center;
padding-top: 10px;
text-transform: uppercase;
}
#content {
position: relative;
margin: 25px auto;
width: 1024px;
max-width: 100%;
color: #EEEEEE;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
height: 10vh;
box-shadow: 0 10px 15px -15px rgba(0, 0, 0, 0.40) inset;
}
footer p {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
text-align: center;
margin: auto;
font-size: 1rem;
}
footer a {
color: #0080FF;
text-decoration: none;
}
#background-video {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
min-width: 100%;
min-height: 100%;
z-index: -2;
}
</style>
</head>
<body>
<header>
<h1><img src="logotipo.png" alt="Constru Vip"></h1>
<h2>Equipamentos simples que facilitam a construção civil</h2>
</header>
<div id="content">
<p>Suspendisse quisquam ea enim, habitasse culpa commodo harum. Nisi aptent! Phasellus, aut.</p>
<p>Venenatis aut, torquent, semper cumque eros pede, nibh etiam error? Luctus sed? Dictumst ridiculus tempor, magnam, fusce. Dictumst, quod ultricies aliqua, soluta. Explicabo.</p>
<p>Amet accumsan sagittis facilis incididunt tempus phasellus aliquip aliquip tempore cubilia magnam risus.</p>
<p>Aliquid hymenaeos fusce impedit delectus! Dignissim quidem, porro omnis est imperdiet.</p>
</div>
<footer>
<p><a href="https://construvip.ext.br/">Constru Vip</a> © 2024</p>
</footer>
<video id="background-video" autoplay loop muted playsinline>
<source src="background-nature-n1.mp4" type="video/mp4" />
</video>
</body>
Comente no