小编Het*_*ana的帖子

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

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

我的容器是相对定位的，我的视频和文本叠加 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 视频弹出窗口覆盖。

欢迎任何线索。

谢谢