0

我正在构建一个基于https://apprtc.appspot.com/的视频聊天应用程序（要运行此应用程序，您需要在两个单独的选项卡中打开相同的 URL）。

我想对此参考应用程序进行两处更改。

  1. 在浏览器窗口中居中视频。
  2. 对齐大视频右下角的小视频（类似于Skype）。

我设法使用http://css-tricks.com/centering-in-the-unknown/解决了＃1，但我无法弄清楚＃2。问题在于大视频大小是动态的（WebRTC 会根据 CPU 和带宽条件随时间改变其大小）。它还会随着浏览器窗口大小的调整（适合查看）而增长/缩小。当大视频改变大小时，小视频会失去对齐。

当后者的大小随时间变化时，如何将小视频与大视频的右下角对齐？

更新：请提供重叠视频的解决方案，而不仅仅是盒子。此外，请确保视频随着浏览器窗口的增大/缩小而增大/缩小。

4

1 回答 1

2

您可以使用 CSS 定位：

HTML

<div id="container">
    <div id="big_video">
        test
         <div id="small_video">test2</div>
    </div>

</div>

CSS

#big_video{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position: relative;
}

#small_video{
    border: 1px solid black;
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 0;
    right: 0;
}

小提琴：http: //jsfiddle.net/FhtCP/12/

于 2013-03-07T18:33:16.587 回答