Embedding a video as a background in a div (bootstrap)

Question

I am trying to add a video to a div as a background (.form-container), in the past I have done the same for a full-screen page, but in this case I only need it in a div, problem: dunno how to do this, I played with width, but the video does not cover the full div.

This is a full-screen video, but obviously does not work. I tried to play with z-index, but I really lost how twitter-bootstrap handles 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; 
}

See demo: http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110

When I try to change the width to 100% and set the maximum height to 250 pixels to “fit” the div.

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

See demo: 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