Question

我正在尝试在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>

Answer 1

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

的视频的非常好的文章

Answer 2

更新小提琴：

JS Fiddle

在您的视频代码id='video-background'

中添加ID

<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

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

2 个答案: