Problems with fullscreen muted autoplay looped background video

[timcahiu1]

I'm building this site for my AC/DC Tribute band and want the visitors to be met with a fullscreen video that plays muted in the background until they take action. But somehow the video plays only sometimes, I haven't found the logic in how it is played, it seems random. I have followed several tutorials, and the code should work according to those. Anyone have any ide what's wrong?

My website: BALLBREAKERS - AC/DC Tribute

The effect I want: C H A N D

Code:

HTML Code:

 

<video id="bgvid" autoplay loop muted poster="images/hell.jpg"> <source src="hell.webm" type="video/webm" /> <source src="hell.m4v" type="video/mp4" /> <source src="hell.mp4" type="video/mp4" /> </video>

CSS:

HTML Code:

 

#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(images/hell.jpg) no-repeat; background-size: cover; opacity: 0.5; }