带有引导覆盖内容的 HTML5 背景视频答案

【问题标题】：HTML5 background video with bootstrap overlay content带有引导覆盖内容的 HTML5 背景视频
【发布时间】：2017-04-11 21:23:53
【问题描述】：

我目前正在尝试在 bootstrap 中创建一个 div，其中包含两列，以及整个 div 的背景视频。问题是，我不能这样做并保留列内容，并以响应方式完成所有操作。

我附上了一个小提琴 - 红色是我需要视频出现的地方（出于兼容性目的带有海报框架）。

有什么最好的方法吗？谢谢

https://jsfiddle.net/by07or2p/#&togetherjs=DmdvnAF3Td

视频部分如下，因为我必须编写代码才能发布：

<video autoplay>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

【问题讨论】：

检查答案中更新的小提琴；）

标签： html css video html5-video

【解决方案1】：

使用相对于父 div 的位置，然后根据您对子 div 的需要定位绝对上/左/下/右。这也是一篇很好的关于视频的文章，你可以使用Fluid Width Video

【讨论】：

谢谢 - 这不会影响响应吗？

【解决方案2】：

更新小提琴：

JS Fiddle

将 id 添加到您的视频标签id='video-background'

<video autoplay id='video-background'>
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

更改css

#video-background {
  position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}


.hero {
    background: transparent;
}

更新小提琴：

JS Fiddle

【讨论】：

这不是你在 OP 中问的吗？
谢谢 - 虽然这会创建一个完整的页面视频 - 我需要它只是 div 的背景视频。