Question

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

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

将视频置于浏览器窗口中心。
对齐大视频右下角的小视频（类似于Skype）。

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

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

更新：请提供重叠视频的解决方案，而不仅仅是方框。此外，请确保视频在浏览器窗口增长/缩小时增长/缩小。

Answer 1

您可以使用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/

CSS：对齐未知大小的元素

1 个答案: