使 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 and here it is the live code.

使用JS适配视频：视其比例和window比例而定。在代码片段下方。查看 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

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

Fit div container to video size (fullscreen as well)

html

css

video

overlay

html5-video