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

Question

我目前正在尝试在引导程序中创建一个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到您的视频标签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