title: HTML - Placing a video to the background responsively
body: <p>I try to implement video background to my website. I want it to be <strong>on the top of the page</strong> (meaning that whatever the height of the window, when the scrollers on the most top position it should be whole video on the background), and I will place some content on the foreground of the video also below of the video. For now I use the following CSS:</p>
  
  <pre><code>#myVideo {
      position: absolute;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
  }
  </code></pre>
  
  <p>My HTML is structured like this:</p>
  
  <pre><code>&lt;header&gt;
    &lt;video autoplay muted loop id="myVideo"&gt;
      &lt;source src="video.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
  
    &lt;div class="container"&gt;
      --- Content on the foreground
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;section&gt;
    -- Content below the video
  &lt;/section&gt;
  </code></pre>
  
  <p>For now I get the result I want on full page, but it is not responsive. When I dimnish the screen size, video stays on full screen as I want but the content below the video moves up and overlaps with the video. How can I fix this?</p>