Video run in a div as background

Question

Video run in a div as background

Navigation

#1 by (7 votes)
#2 by (2 votes)

0

I want to make a video run within a div.

I saw this on the PaperCut site and would like to do the same.

html html5 div

asked by anonymous 12.03.2017 / 16:53

2 answers

How to convert a string to object in JavaScript? Function similar to indexOf () in JavaScript

score 7 · Answer 1

Both of these responses have used fixed and z-index negative with exaggerated values, it may even work, but it is very likely that it will cause you a lot of headaches to apply to a ready layout, ideally use position: relative + position: absolute , because thus position: absolute will adapt to the element "father", it 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><divclass="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>

score 2 · Answer 2

Hello friend is easy with html 5 just have a poster of the video jpg, the video in mp4 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; 
}