Make text under this fullscreen video

Question

Can someone help me? I am making a project for school and I had this cool idea to make this fullscreen video as a sort of home/welcome page, and when they would scroll down they would see the normal text and other content.

Thanks

    #myVideo {
    position: fixed;

    min-width: 100%;
    min-height: 100%;
    }

    .content {

    text-align: center;
    font-size: 500%;

    width: 100%;
    padding: 20px;
    color: #FFF;
    font-family: 'ds';
    mix-blend-mode: difference;
    filter: drop-shadow(.05em .05em orange);
    }

   
     <link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>



     <div><video autoplay muted loop id="myVideo">
      <source src="xxx.mp4" type="video/mp4">
      </video>
       <div class="content">
       <p>$WHY ISNT THIS WORKING$</p><br>
       <p>$CZP$</p>
     </div></div>
    <h1>This text needs to be under the video</h1>

Answer 1

Is this what you are looking for?

#myVideo {
width: 100vw;
height: 100vh;
}

.video-container {
min-width: 100vw;
min-height: 100vh;
background-color: green;

}

.content {
background-color: yellow;
text-align: center;
font-size: 500%;
width: 100%;
padding: 20px;
color: #FFF;
font-family: 'ds';
mix-blend-mode: difference;
filter: drop-shadow(.05em .05em orange);
}

<div class="video-container">
  <video autoplay muted loop id="myVideo">
    <source src="xxx.mp4" type="video/mp4">
   </video>
</div>
<div class="content">
  <p>$WHY ISNT THIS WORKING$</p><br>
  <p>$CZP$</p>
  <h1>This text needs to be under the video</h1>
</div>