Quero fazer um vídeo rodar dentro de uma div.
Vi isso no site da PaperCut e gostaria de fazer o mesmo.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeQuero fazer um vídeo rodar dentro de uma div.
Vi isso no site da PaperCut e gostaria de fazer o mesmo.
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>
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;
}