title: Adding content on top of webcam video i.e. color overlay
body: <p>I'm trying to add a blue color overlay to my full screen video tag that's pulling the video feed from the users webcam (using JS to do this.) I'm unable to get the blue overlay to appear on top of the video, as it displays behind it, and if the div isn't set to absolute, the video stops being full screen - any thoughts?</p>
  
  <pre><code>&lt;div class="fullscreen-bg"&gt;
  &lt;div class="overlay--blue"&gt;
      &lt;video id="videoElement" class="fullscreen-bg__video"autoplay="true"&gt;&lt;/video&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  .fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
  }
  
  .fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      height: 300%;
      top: -100%;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
      width: 300%;
      left: -100%;
    }
  }
  
  .overlay--blue {
      background-color:rgba(19, 186, 228, 0.8);
      position: absolute;
      width: 100%;
      height: 100%;
  }
  </code></pre>