将 div 容器调整为视频大小（也可全屏）

我正在尝试获取覆盖视频的文本，并根据其大小调整进行相应的操作。

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

我的容器是相对定位的，我的视频和文本叠加 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/ https://jsfiddle.net/xw17xbc9/1/

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

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

欢迎任何线索。

Thanks

我不确定我是否完全理解你想要做什么，但是这个更新的 jsfiddle https://jsfiddle.net/xw17xbc9/2/显示视频容器占据视频播放器的高度。

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

Update

新jsfiddle https://jsfiddle.net/xw17xbc9/5/显示容器具有两个高度and子视频元素的宽度。