Video run in a div as background

Asked

Viewed 14,161 times

0

I want to make a video run inside a div.

I saw it on Papercut and I’d like to do the same.

html html5 div
  • 1

    Possible duplicate of Video Html5/css3

  • @Julianodasilvabarbosa the other question is about a problem with the aspect that ends up displaying two black bars (problem in adjusting width and height), and not how to put as background, there the author already knows how to do, the problem is specific in the size manipulation. ;)

2 answers

8


Both other responses used fixed and z-index negative with exaggerated values, may even work, but it is very likely that will cause you a lot of headaches to apply in a ready layout, the ideal is to use position: relative + position: absolute, for so the position: absolute will adapt to the "father" element, would look something like:

.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>

2

Hello friend is easy with html 5 just have a jpg video poster, mp4 video follows an example

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; 
}

Browser other questions tagged html html5 div

You are not signed in. Login or sign up in order to post.