Video like Background HTML 5 doesn’t work on Safari and Chrome on Mac

Question

I put a video as background of a site with HTML 5, I open in Chrome and Firefox on Windows and the video rolls normal, but when I open on Mac (Chrome version 67.0.3396.40, and Safari 11.1) the video does not roll... Does anyone know 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%;
}

Answer 1

Thayna I don’t have a Mac here to test, but its tag video can be built with the source within the tag video, which is more suitable. It might work like this on Mac..., but as I said here I have no way to test Ness platform.

Another detail, swap test by changing position:Absolute for 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 tag usage video, vc can even test on Mac https://www.w3schools.com/tags/tag_video.asp