Embedding video as background in a div (bootstrap)

Question

I am trying to add a video in a div as background (.form-container), in the past I do the same for a full-background page, but in this case I need it only in the div, the problem: dunno how to do it, I was playing with the width, but the video don't cover the full div.

This is a full-background video, but obviously don't work. I was trying to play with the z-index, but I am very lost in how twitter-bootstrap handle the 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 the demo: http://codepen.io/wiitohzjeh/pen/vEgmEO?editors=110

When I try to change the width to 100% and set the max-height to 250px for 'fit' the div..

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

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

Answer 1

Set your video container to position: relative then update your video's position to absolute so that it 'sticks' to the container.

#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