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来调整视频：它取决于它的比例和窗口比率。在代码片段下面。请参阅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容器调整为视频大小（全屏也是如此）

2 个答案: