problem Video background under the header and body

[stayarthur]

Hi there,

I went into a problem, might be simple for you but I am sitting here and try it out for many many many hours...

Here is the thing, at the top is my header, the header is seperated with php in another file/folder and with a php code it is displaying in the index home file.

I would like to have the background video fully covered under my content body and under my header. But whenever I put it, then it is under my content only and the header is disappearing for some reason. Also, when I put it for header only, then I will get it at the top only and the body will be empty with my normal content but without the background video.

Here is the code I am using:

#CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

HTML

<video autoplay muted loop id="myVideo">
  <source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

I put the CSS at the top in the header section and the other stuff in front of my body content.

Any suggestions? :(

[Ingolme]

You will have to specify a negative z-index to keep it behind all of the elements. By default, it is in front of the elements that precede it and behind the elements that follow it.