使 div 容器适合视频大小（全屏）

Question

我正在尝试获取覆盖视频的文本并根据其大小调整行为。

目前我的麻烦是使视频的容器与播放器的大小相同（以及全屏模式）。

我的容器是相对定位的，我的视频和文本覆盖 div 都是绝对定位的：

HTML：

<div id="container">
        <video id="videoPlayer" controls="true"></video>
        <div id="videoCaption"></div>
</div>

CSS：

#container {
position: relative;
}

#videoPlayer{
position: absolute;
z-index: -1;
}

#videoCaption{
position: absolute;
z-index: 2147483647;
font-size: 80%;
line-height: 125%;
text-align: left;
color: #c9302c;
background-color: #000000;
font-weight: normal;
text-decoration: none;
font-family: "monospaceSansSerif";
}

这里是一个工作示例：https://jsfiddle.net/xw17xbc9/1/

容器没有高度（1904px x 0px），视频播放器是 1280px x 720px，我的 videoCaption div 是 205px x 16px（取文本的大小），卡在播放器的左上角。

嗯，基本上我想要实现的结果有点像 Youtube 视频弹出窗口叠加。

欢迎任何线索。

谢谢

Answer 1

我不确定我是否完全理解您要做什么，但this updated jsfiddle 显示视频容器占用了视频播放器的高度。

如果父元素是position:absolute，它们的子元素的高度将不会达到。我制作了视频播放器元素position:relative，然后添加了top:0px; left:0px; 以将文本容器放回容器的左上角。

更新

New jsfiddle 显示容器同时采用子视频元素的高度和宽度。

Answer 2

基本上，如果我理解正确的话，你想要一个全屏视频。

Here is the fullscreen demo，这里是the live code。

使用 JS 来调整视频：这将取决于它的比例和窗口比例。在代码的 sn-p 下面。查看 JSBIN 进行测试：

function(){

        wWidth = $(window).width();
        wHeight = $(window).height();

        if (wWidth / s.ratio < wHeight) { // if new video height < window height (gap underneath)
            pWidth = Math.ceil(wHeight * s.ratio); // get new player width
            $(s.playerId).width(pWidth).height(wHeight).css({left: (wWidth - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
        } else { // new video width < window width (gap to right)
            pHeight = Math.ceil(wWidth / s.ratio); // get new player height
            $(s.playerId).width(wWidth).height(pHeight).css({left: 0, top: (wHeight - pHeight) / 2}); // player height is greater, offset top; reset left
        }
 };

在功能设置中编辑视频比例：

"ratio"         : 16/9