javascript - Overlaying an HTML5 video element over another video element. - Stack Overflow

admin管理员组

文章数量:1355532

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 acplish 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?

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 acplish 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?

• javascript
• css
• html
• video

Share Improve this question Follow asked Apr 3, 2015 at 5:02 puopgpuopg 57377 silver badges1717 bronze badges 1

• Try using css z-index property. – stanze Commented Apr 3, 2015 at 5:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptOverlaying an HTML5 video element over another video elementStack Overflow