I can't seem to get my background video to play in the background

I am trying to get my video to play in the background of my website but for some reason, it gets on top of all of the other content on the site. I don't know whats going on.

CSS

.fullscreen {
    position:static;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow:hidden;
    z-index: -100;
             }

.fullscreen-vd {
    position:absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 0px) {
    .fullscreen {
        background: url('gif.mp4') center center / cover no-repeat;
    }
    .fullscreen-vd {
        display: none;
    }
}
   

HTML

<div class="fullscreen">
            <video loop autoplay muted poster="IMG_25062017_221924_0.png" class="fullscreen-vd">
    <source src="gif.mp4" type="video/mp4">
    </video>
        </div>