将视频设置为 div 背景并将文本放在前面答案

【问题标题】：Setting video as div background and bring the text in front将视频设置为 div 背景并将文本放在前面
【发布时间】：2020-07-03 22:01:02
【问题描述】：

我想将我的文本背景设置为视频。在我尝试后，我无法将文本放在前面。文字总是隐藏在背后。另一个问题是视频背景在较小的屏幕上没有响应，它覆盖了整个屏幕。更重要的是，似乎视频的帧宽度和高度已被删除（例如，不以原始宽度和高度比例播放）。

谁能帮我解决这个问题？

HTML：

<div class="container-fluid no-left-padding no-right-padding welcome-text video-content">
   <!-- Container -->
   <div class="container">
      <video autoplay muted loop>
         <source src="assets/videos/welcome_video.mp4" type="video/mp4">
      </video>
      <h2>Hello, I want to display this text, and play the video on background.
      </h2>
   </div>
</div>

CSS：

.welcome-text {
    padding-bottom: 180px;
    padding-top: 180px;

}
.video-content{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
video{
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

【问题讨论】：

标签： html css bootstrap-4 html5-video css-transitions

【解决方案1】：

尝试将<h2>Hello I want to play this text and play the video on the background.<h2\> 放在<video><video\>tags 之前

我也建议参数就像高度和宽度一样 width:auto;height:auto;

【讨论】：

Akanimoh Samuel Obot，感谢您的回答。但它不起作用，也不应该起作用。
好吧...我虽然语法影响了性能。我明白了。谢谢

【解决方案2】：

尝试在文本中添加z-index: 2，使其出现在视频的前面。

z-index

关于视频的大小，你必须定义div.container的大小和

 video{
     min-width: 100%;
     min-height: 100%;
     [...]
}

在jsfiddle做这个例子

我建议你看看这两篇文章：

video height

how to change height of the video

【讨论】：

【解决方案3】：

在视频前面加上文字：

.welcome-text {
    position: relative;
    /* make it position:absolute instead if you want it to be centered as shown below*/
    z-index: 1;
}

在容器中居中文本：

.container {
    position: relative;
}

.welcome-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

关于使视频具有响应性并保持纵横比，您必须弄清楚纵横比是多少。假设视频为 1280 x 720，则纵横比为 1.78:1。这意味着如果宽度为 100%，则高度应为 56%。

你不能告诉 div 有 56% 的容器宽度，但是有一个技巧，你可以告诉它有 56% 的宽度作为填充：

.container {
    position: relative;
    height: 0;
    padding-bottom: 56%;
    overflow: hidden;
}

video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

【讨论】：