Наложение элемента видео 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; это будет просто Overlay видео поверх друг друга и инкапсулировать их в .video-container

вот fiddle с изменениями в вашей css