將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變化的小提琴