HTML 和 CSS 中的视频标题答案

【问题标题】：Video header in HTML and CSSHTML 和 CSS 中的视频标题
【发布时间】：2016-08-15 21:55:52
【问题描述】：

我正在创建一个网页，该网页应该在顶部有一个 视频标题，它会延伸到屏幕上但仅显示 80% 的高度，然后将文本放入标题。

我已经成功地让视频循环播放并拉伸到屏幕的宽度，并且只显示屏幕高度的 80%，方法是用一个只显示 80% 内容的环绕环绕它。

我没有成功尝试使用“z-index”标题将文本放在标题上，因为我在视频上使用“位置：继承”，当我设置“位置：绝对”时它可以工作但随后视频显示的内容超出了应有的范围！

这是 HTML

<div id="headerContent">
    <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop>
        <source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4">
    </video>
    Hello
</div>

这是 CSS

#headerContent {
    width: 100%;
    height: 80%;
    overflow: hidden;
}
video {
    position: inherit;
    min-width: 100%;
    overflow: hidden;
    z-index: -1;
}

【问题讨论】：

标签： html css video header

【解决方案1】：

将单词 Hello 包装到 div 中，然后给该 div 绝对位置，并将其放置在您想要的任何位置。

【讨论】：

【解决方案2】：

这应该可以解决

<html>
<head>
<style>
#headerContent {
    width: 100%;
    height: 80%;
    overflow: hidden;
    position: relative;
}

video {
    position: inherit;
    min-width: 100%;
    overflow: hidden;
    z-index: -1;
}

p {
    position: absolute;
    text-align: center;
    font-size: 4em;
    z-index: 9999;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

</style>
</head>
<body>
<div id="headerContent">
    <p> Hello </p>
    <video poster="http://eyday.net/Titas%20Communications%20/Assets/Bakgrund.png" autoplay="true" loop>
        <source src="http://eyday.net/Titas%20Communications%20/Assets/1Intro_f_tablet.mp4" type="video/mp4">
    </video>
    </div>
</div>
</body>
</html>

【讨论】：