Video as Background HTML 5 does not work in Safari and Chrome on Mac

Navigation
1

I put a background video of a website with HTML 5, I open it in Chrome and Firefox in Windows and the video scrolls normal, but when I open the Mac (Chrome version 67.0.3396.40, and Safari 11.1) the video no scroll ... Anyone know of any solution?

HTML: 

<div class="wrap">
                <div class="bg-video">
                    <video autoplay loop src="images/video-serv.mp4"></video>
                </div>
</div>

CSS: 

.wrap {
    /*Ajuste a largura e altura desejadas aqui*/
    width: 100%;
    height: 100%;

    /*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%;
}
    
asked by anonymous 10.05.2018 / 22:42

1 answer

1

Thayna I do not have a Mac here to test, but your video tag can be built with source inside the video tag, which is more appropriate. It might work that way on Mac ... but as I said here I can not test the platform.

Another detail, change test by changing position: absolute by relative, in this class .wrap > .bg-video { position: relative; ....} 

.wrap {
    /*Ajuste a largura e altura desejadas aqui*/
    width: 100%;
    height: 100%;

    /*isto fará o elemento video e o .container se adaptarem ao .wrap*/
    position: relative;
}
.wrap > .bg-video {
    position: relative;
    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 loop>
            <source src="https://www.w3schools.com/tags/movie.mp4"type="video/mp4"  />
        </video>
    </div>
</div>

Here are some examples of using the video tag, you can even test on the link

    
10.05.2018 / 23:01
Navigation between pages (Android) [closed] How to concatenate a variable to a string that contains escape character