Html & Css: Video backgroud adapt monitor size

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!