Video background grid overlay issue


This is probably a really obvious mistake that i'm missing, but anyway:

I'm having an issue with using a video as a background for a website and overlaying it with a semi-transparent 4x4px png image as a grid. The grid just overlaps the video, so the video should show through the repeated transparent image, but it just seems to disappear.

Any help with this is appreciated immensely (even though it's probably just a really simple error on my behalf)

Here's some screenshots of the problem:

Grid overlay issue Grid appearing, no video though The grid appears, but no video through it (video looks like screenshot below) Video that should be showing through the grid

The grid is a repeated 4x4px png, the white 2x2px are transparent and the grey 2x2px are at 75% opacity.

Here is grid.png blown up (too small to attach):

blown up grid.png

EDIT: grid.png attached

grid.png

HTML

    <div id="container">

        <div class="grid"></div>

        <!-- BG-VIDEO -->

        <video autoplay loop muted>
            <source src="video/video.mov" type="video/mp4">
        </video>
        <div class="content">
            <center>
                <div class="titlebox">
                    <h1>The Redtree Cafe</h1>
                </div>
            </center>
        </div>



    </div>

CSS

*{
    margin: 0;
    padding: 0;
}

/* VIDEO */

#container {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}


.grid {
    background: url(img/grid.png);
    width: 100%;
    height: 100vh;
    z-index: 1000;
}

/*Front Page*/

.titlebox {
    z-index: 2000;
}

Answers:


The problem is that your video is rendering below the grid. One of the way to fix this is to add position: absolute to the grid element:

.grid {
    position: absolute;
}

See it here: http://jsfiddle.net/6wotw7u3/