Overlaying an HTML5 video element over another video element.

Question

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.

Here's what I have tried:

HTML:

<div class='video-container'>
   <video class='userVideo' id="localVideo" autoplay></video>
   <video class='peerVideo' id='peerVideo' autoplay></video>
</div>

CSS:

.userVideo {
    height: 200px;
    width: 200px;
    float: left;
    border:5px solid orange;
    position: absolute; 
    top: 100px; 
}

.peerVideo {
    height: 200px;
    width: 200px;
    border:5px solid blue;
}

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?

Answer 1

What you need to do is set .video-container to position: relative; , and then make the two videos position: absolute; this will simply overlay your videos on top of each other and encapsulate them in .video-container

here's a fiddle with the changes to your css