How to put a background video loop on a website HTML/CSS

Question

I'm trying to put a video as a background video on my website. I've researched a lot and it is not working and I don't know why.

On my html I have:

<video id="bgVideo" controls preload="true" autoplay loop muted>
    <source src="../images/Home_Page.mp4" type="video/mp4" >
    <source src="../images/Home_Page.ogv" type="video/ogg" >    
    <source src="../images/Home_Page.webm" type="video/webm" > 
</video>     
<script src="scripts/html5ext.js" type="text/javascript"></script> 

And on my CSS I have:

body
{
background:  url("../images/Home_Page.png") no-repeat fixed center;
}

video#bgVideo {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;    
background-size: cover;
}

However, the video is not playing and the background stays white. Any suggestions to solve this problem??

Thank you so much

Answer 1

this should work

   <video id="bgVideo" controls preload="true" autoplay loop muted>
      <source src="Home_Page.mp4" type="video/mp4" > 
       <source src="Home_Page.ogv" type="video/ogv" >    
      <source src="Home_Page.webm" type="video/webm" > 

   </video>

Also you should create a htaccess file/amend your htaccess file to include the following

   AddType video/mp4 .mp4 .m4v
   AddType video/ogg .ogv
   AddType video/webm .webm

a helpful tutorial to doing this is here

Answer 2

        <div class="video-container">

            <video autoplay loop muted width="100%">
                <source src="Path To mp4 Video" type="video/mp4" />
                <source src="Path To webm Video" type="video/webm" />
            </video>                
            <div >
                <img src="path to Image" alt="">
            </div>
            <!-- If Videos are not supported this image will act as cover image-->
        </div>

Answer 3

This code is worked for me its providing full screen video.

 var vid = document.getElementById("bgvid"); var pauseButton = document.querySelector("#polina button"); if (window.matchMedia('(prefers-reduced-motion)').matches) { vid.removeAttribute("autoplay"); vid.pause(); pauseButton.innerHTML = "Paused"; } function vidFade() { vid.classList.add("stopfade"); } vid.addEventListener('ended', function() { // only functional if "loop" is removed vid.pause(); // to capture IE10 vidFade(); }); pauseButton.addEventListener("click", function() { vid.classList.toggle("stopfade"); if (vid.paused) { vid.play(); pauseButton.innerHTML = "Pause"; } else { vid.pause(); pauseButton.innerHTML = "Paused"; } }) 

 body { margin: 0; background: #000; } video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat; background-size: cover; transition: 1s opacity; } .stopfade { opacity: .5; } #polina { font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif; font-weight:100; background: rgba(0,0,0,0.3); color: white; padding: 2rem; width: 33%; margin:2rem; float: right; font-size: 1.2rem; } h1 { font-size: 3rem; text-transform: uppercase; margin-top: 0; letter-spacing: .3rem; } #polina button { display: block; width: 80%; padding: .4rem; border: none; margin: 1rem auto; font-size: 1.3rem; background: rgba(255,255,255,0.23); color: #fff; border-radius: 3px; cursor: pointer; transition: .3s background; } #polina button:hover { background: rgba(0,0,0,0.5); } a { display: inline-block; color: #fff; text-decoration: none; background:rgba(0,0,0,0.5); padding: .5rem; transition: .6s background; } a:hover{ background:rgba(0,0,0,0.9); } @media screen and (max-width: 500px) { div{width:70%;} } @media screen and (max-device-width: 800px) { html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; } #bgvid { display: none; } } 

 <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button --> <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm"> <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"> </video> <div id="polina"> <h1>try this</h1> <p>your text or elements</p> <button>Pause</button> </div>