I've been struggling to set a video as the background of my website. Despite researching extensively, I can't seem to get it to work and I'm not sure where I'm going wrong.
In my HTML code, this is what 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 in my CSS file, this is what I've added:
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;
}
Despite this setup, the video isn't playing and the background remains white. Any suggestions on how to resolve this issue?
I appreciate any help you can provide. Thank you!