How can I put a video as a the background of the page in css/html?-CodePudding

I have tried to put a video as a component using the <video> tag, but that seemed to cover all or most components, I am asking if there is a way to set the actual background of the page to be a video (preferably video or otherwise also gif) or put the component below all components at all times.

My best attempt, putting all positions to relative, but all navs/buttons are not clickable:

<body>
  <div>
    <video autoplay muted loop id="myVideo">
      <source src="/assets/videos/circuit-board-hero.mp4" type="video/mp4">
    </video>
  </div>
<div>
[...]
</div>

<style>
.nav {
    position: relative;
}
.logotext {
    padding-left: 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    letter-spacing: .2em;
    font-size: 20px;
    position: relative;
  }

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

I am using SASS btw, the above is compiled CSS...

CodePudding user response：

You can try this :

.nav {
    position: relative;
}
.logotext {
    padding-left: 20px;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    letter-spacing: .2em;
    font-size: 20px;
    position: relative;
  }
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index:-1;
    filter: brightness(0.5);
  }
   h1, h2 
   {
        color: white;
        font-family: Trebuchet MS;
        font-weight: bold;
        text-align: center;
    }

    h1 {
      font-size: 6rem;
      margin-top: 30vh;
    }
    h2 { font-size: 3rem; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
  <body>
  <div>
    <video autoplay muted loop id="myVideo">
      <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
    </video>
  </div>
<div>
  <h1>THIS IS A RIVER.</h1>
<h2>How Are you.</h2>
</div>

</body>
</html>

CodePudding user response：

try this :

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