Jump to content

Problems with fullscreen muted autoplay looped background video


Recommended Posts

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


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>


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; }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...