将HTML5视频元素覆盖在另一个视频元素上。

Question

我试图覆盖2个视频元素，其中一个直接位于另一个之上。 显然，顶部的那个将比另一个小，使得两者都可见。 到目前为止，我能够找到的唯一内容是在视频上覆盖文本，但大多数时候我看过的例子都使用了从页面顶部开始的硬编码距离来实现这一目标。

这是我尝试过的：

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;
}

到目前为止，我唯一能够实现的是一个重叠单个视频的文本div。 有没有办法重叠2个视频甚至将视频嵌入另一个视频？

Answer 1

你需要做的是将.video-container设置为position: relative; ，然后使两个视频的position: absolute; 这将简单地将您的视频叠加在一起， .video-container它们封装在.video-container

这里是你的css变化的小提琴