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

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

htmlcssvideo


Solution 1:[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 for doing this is here

Solution 2:[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>

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wakey
Solution 2 user6440121
Solution 3

Related Questions