background video in div with fixed background images attached to sections below - very buggy

http://jsfiddle.net/qhdt473q/4/

I have a background video in one section. In the sections below they have fixed background images attached to them, which aren't showing up. If the video is removed from the HTML the background images behave as expected. Why is this happening? How do I fix this? Thanks!

Code:

video {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        height: auto;
        z-index: -100;
        background: url(http://media.w3.org/2010/05/sintel/poster.png) no-repeat;
        background-size: cover;
    }
    
    html, body, .site-container, .content, section {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .content {
        z-index: 66;
    }

    #section2 {
        background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section3 {
        background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section4 {
        background: url(http://www.hdwallpapersn.com/wp-content/uploads/2015/04/background_image_9.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section5 {
        background: url(http://hdw.datawallpaper.com/abstract/christmas-background-desktop-background-542647.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section6 {
        background-color: #0039a6;
        height: 100%;
        color: #fff;
    }

<div class="site-container">
    <video id="video" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" autoplay loop muted>
        <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
            <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
                <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                    <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div class="content">
        <section id="section2"></section>
        <section id="section3"></section>
        <section id="section4"></section>
        <section id="section5"></section>
        <section id="section6"></section>
    </div>
</div>