如何在html中相互添加视频标签？在视频聊天应用中？使用javascript

我有一个视频聊天应用程序，但它有一个糟糕的用户界面。我想知道这两个视频怎么能像这样排列

没有信誉点对不起，请查看链接

我正在使用twilio、bootstrap和javascript

<div id="call_tracks" class="modal fade" role="document">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
   </div>
   <div class="modal-body">
   <div class="row">
     <div class="col-md-6">
      <div class="col-md-6" id="local">
       <div id="local-media">
        <video id="video1"></video>
       </div>
       <input id="button-preview" onclick="preview();" type="button" value="Preview My Camera" />
      </div>
    </div>
 </div>
  <div class="row">
   <div class="col-md-4">
    <div id="remote">
     <div id="remote-media">
      <img src="http://placehold.it/360x270s&text=Remote+Video" />
      <video id="video2"></video>
    </div>
    <p id="remote-video-label" class="video-label">participant video</p>
   </div>
  </div>
 </div>
 </div>
 </div>
 </div>
<script>

document.getelementbyId(video1);
document.getelementbyId(video2);
<script>

&时代；
参与者视频
document.getelementbyId（video1）；
文件.getelementbyId（video2）；

这里是Twilio开发者福音传道者

事实上，我最近创造了类似的东西。它没有使用Bootstrap，但它确实包含了CSS，以实现画中画风格的显示。这是我写的关于创建一个。以下是创建此效果的方法：

---

让我知道这是否有帮助。

你的答案应该根据自己的优点，而不需要参考任何场外资源。是的，一路CSS。我的HTML可能与你的略有不同，所以也请检查一下。其基本思想是将视频完全放在一个容器内，一个覆盖整个容器，另一个漂浮在容器上方，然后坐在右下角（或左下角）。听上去真棒！你能把答案标记为正确的吗？这样其他人就可以告诉你了，谢谢！