Html & Css: Video backgroud adapt monitor size - html

Question

i need to use a mp4 video as background.
I would like the video to adapt to the size of the screen and not overlap with what is underneath.
I write:
<video autoplay loop muted poster="<?php echo $wo['config']['theme_url'];?>/img/1-s.png" id="bgvid">
<!-- MP4 must be first for iPad! -->
<source src="<?php echo $wo['config']['theme_url'];?>/video/1bis.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
And my css is:
video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
z-index: 0;
}
by assigning "top: 0", I would like the video to be displayed with:
height: 100vh;
overflow: hidden;

Answer 1

Hi Matteo is better positioning 50% left and top and after traslate the video to center it inside the page.
With z-index you can use negative number. If the video is used for background, add z-index: -1. In this way the other object stay over the video.
body {
padding:0;
}
video {
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
min-height:100%;
min-width:100%;
z-index:-1;
}
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<h1>
PAGE TITLE
</h1>

Answer 2

I found this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video that I think is the best solution for your case.
The key of your problem is the position of the video.
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Hope it helps!