Full-screen background video does not autoplay

Question

I'm making a simple web page, and I wanted the first window to have a full screen playing video. I tried to embed it like this:

<div class="section active">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm"> 
Video not supported 
</video> 

and

#video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 69;
    overflow: hidden;
}

The first frame shows up, but it doesn't start playing. The files are in their proper location. Why could this be? I'm using fullPage.js if it makes any difference.

Answer 1

Please check this link: https://github.com/alvarotrigo/fullPage.js/issues/267

You will have to make use of the callbacks afterRender or afterLoad for it.

$.fn.fullpage({
    afterRender: function(){
        $('#video')[0].play();
    }
});

Now you can find also an available example to download in the examples folder of the plugin.

Answer 2

Try this

<div class="section active">
<video id="video_background" autoplay loop muted preload="auto">
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm"> 
Video not supported 
</video>