0

Quero fazer um vídeo rodar dentro de uma div.

Vi isso no site da PaperCut e gostaria de fazer o mesmo.

2
  • 1
    Possível duplicata de Vídeo html5/css3 27/03/2017 às 3:19
  • @JulianodaSilvaBarbosa a outra pergunta é sobre um problema com o aspecto que acaba por exibir duas barras pretas (problema no ajuste do width e height), e não como colocar como background, lá o autor já sabe como fazer, o problema é especifico na manipulação do tamanho. ;)
    – Syzoth
    16/01/2018 às 0:56

2 Respostas 2

8

Ambas outras respostas usaram fixed e z-index negativo com valores exagerados, pode até funcionar, mas é bem provável que irá lhe causar uma série de dores de cabeça para aplicar em um layout pronto, o ideal é usar position: relative + position: absolute, pois assim o position: absolute irá se adaptar ao elemento "pai", ficaria algo como:

.wrap {
    /*Ajuste a largura e altura desejadas aqui*/
    width: 800px;
    height: 300px;

    /*isto fará o elemento video e o .container se adaptarem ao .wrap*/
    position: relative;
}

.wrap > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; /*apenas um -1 é necessário quando se trabalha com relative + absolute, sendo pai e filho*/
    width: 100%;
    height: 100%;
    overflow: hidden; /* evita do video passar a altura desejada do .wrap */
}
.wrap > .bg-video > video {
    width: 100%;
}
<div class="wrap">
    <div class="bg-video">
        <video autoplay src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>

    <div class="container">
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
        Coloque o que quiser aqui <br>
    </div>
</div>

0
2

Ola amigo é fácil com html 5 basta ter um poster do video jpg, o video em mp4 segue um exemplo

html:

<video autoplay loop poster="nome-do-video.jpg" class="bg_video">
    <source src="videos/nome-do-video.mp4" type="video/mp4">
</video>

css:

.bg_video{
    position: fixed; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -1000;
    background: url(images/nome-do-video.jpg) no-repeat;
    background-size: cover; 
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .