帶引導程序覆蓋內容的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