Pular para o conteúdo principal

Usar video como background

Usar video como background - Publicado por: Wellington Pragidi Desenvolvedor Web

HTML:

<video id="background-video" autoplay loop muted playsinline>
    <source src="https://webship.com.br/video/background.mp4" type="video/mp4">
</source></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.

* {
    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;
}
<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">
</source></video>
Categorias: CSS, HTML