Creating a section with video as background HTML5

Question

I'm trying to imitate the front page of lumosity.com but I am unable to set a video background to the section. Here's what I've done so far:

HTML

<section id="banner">
   <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
     <source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
     <source src="movie.webm" type="video/webm">
          Sorry, your browser does not support HTML5 video.
    </video>
    <p>This is text that is in front of video, we do not want the z-index of video to be greater than content. Hence background!
    </p>
 </section>

CSS

#videobcg { 
     position: absolute;
     top: 0px;
     left: 0px;
     padding: 5em 2em 4em 2em;
     z-index: -1000;
     overflow: hidden;
}

As you can see my code doesn't work, the video remains hidden somewhere on the webpage. Any ideas?

Answer 1

I used this as an example and modified your css.

Example 1: Video as background of containing div

In this example the video only plays as the background of the containing div, similar to lumosity.com:

JSFIDDLE 1

#banner {
    position: relative;
    height:300px;
    width:100%;
    overflow: hidden;
}
#videobcg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    height:auto;
    width:auto;
    z-index: -100;
}

Example 2: Video as background of full page

JSFIDDLE 2

#videobcg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}