將視頻作爲背景嵌入到div中（引導程序）

Question

我試圖在div中添加一個視頻作爲背景（.form-container），過去我對全背景頁面做了相同的處理，但在這種情況下我只需要在div中，問題：不知道該怎麼做，我在玩寬度，但視頻不包括整個div。

這是一個全背景視頻，但顯然不起作用。我試圖用z-index的發揮，但我怎麼嘰嘰喳喳的自舉處理的z-index感到很失落：

#main video { 
    background: #222; 
    position: fixed; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    transition: 1s opacity; 
    opacity: 0.5; 
} 

觀看演示：http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110

當我試圖改變寬度爲100％，並設置最大高度，以250像素爲「適應」在div ..

#main video { 
    background: #222; 
    position: fixed; 
    width:100%; 
    max-height: 250px; 
    transition: 1s opacity; 
    opacity: 0.5; 
} 

觀看演示：http://codepen.io/wiitohzjeh/pen/LExyEK?editors=110

Answer 1

將您的視頻容器設置爲position: relative，然後將您的視頻位置更新爲absolute，以便「粘」到容器上。

#main .form-container { 
    min-height: 250px; 
    padding-bottom: 50px; 
    margin-top: 50px; 
    -moz-box-shadow: 0 2px 5px 0 #333; 
    -webkit-box-shadow: 0 2px 5px 0 #333; 
    box-shadow: 0 2px 5px 0 #333; 
    position: relative; 
    overflow: hidden; 
} 

#main video { 
    background: #222; 
    width:100%; 
    background-size: cover; 
    transition: 1s opacity; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

http://codepen.io/anon/pen/VYPbXj