title: Overlaying an HTML5 video element over another video element.
body: <p>I am trying to overlay 2 video elements, where one lies directly on top of another. Obviously, the one on top will be smaller than the other such that both are visible. So far, the only things I have been able to find are overlaying text over the video, but most of the time the examples I have seen used hardcoded distances from the top of the page to accomplish this. </p>
  
  <p>Here's what I have tried:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='video-container'&gt;
     &lt;video class='userVideo' id="localVideo" autoplay&gt;&lt;/video&gt;
     &lt;video class='peerVideo' id='peerVideo' autoplay&gt;&lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.userVideo {
      height: 200px;
      width: 200px;
      float: left;
      border:5px solid orange;
      position: absolute; 
      top: 100px; 
  }
  
  .peerVideo {
      height: 200px;
      width: 200px;
      border:5px solid blue;
  }
  </code></pre>
  
  <p>So far, the only thing I have been able to achieve is a text div overlapping a single video. Is there a way to overlap 2 videos or even nest a video within another?</p>