div (부트 스트랩)에 배경으로 비디오 임베딩

Question

div (배경) (.form-container)로 비디오를 추가하려고합니다. 이전에는 전체 배경 페이지에 대해 동일한 작업을 수행했지만,이 경우 div에서 문제가 발생했습니다. 문제가 생길 수 있습니다. 너비와 함께 놀고 있었지만 동영상은 전체 div를 다루지 않습니다.

이것은 전체 배경 비디오이지만 분명히 작동하지 않습니다. 나는 Z- 인덱스와 재생하려고했지만, 나는 매우 트위터 - 부트 스트랩 Z- 인덱스 처리하는 방법에 손실 오전 : 나는 변경하려고하면 http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110

:

#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/LExyEK?editors=110

: 100 % 폭과는

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

데모를 참조하십시오 .. '적합'사업부에 대한 250 픽셀로 최대 높이를 설정

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