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


Tags: html,css,video

Problem :

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



Solution :

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


    CSS Howto..

    How refresh the style of an HTML element after changing it using Javascript?

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How to make an element slide with the viewport as it scrolls?

    How do I center a button in html5?

    how to change the opacity of the text along with the colorscale of the image in css?

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    How to make this text bigger?

    How to slow down the last few frames in a CSS sprite animation?

    How to color specific word in a container using CSS

    How to get Circle Hover Effects with CSS Transitions with img tag?

    How to generate a elongated hexagon shape with two circular sides?

    How to design multiple time clock wise rotation of a image in css

    How to add css files using PHP inside the tag?

    CSS: how to add a down arrow for the active link

    How to edit menu in header - wordpress

    How can I convert a SASS file to a CSS file in an ANT task?

    How to make a div box with display:flex clickable like display:block?

    How to wrap text to the next line inside a DIV and not go off the screen

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How do i make a flexible div with a background in css

    How to use JavaScript OnResize with delay or less processing intensive

    Show Feed in two columns in HTML

    how to increment CSS ID using PHP programmatically

    How do people make sections in HTML pages? [closed]

    How do i hide html until its processed with javascript?

    How to include CSS for a specific part of the page

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to see CSS boxes in firefox inspector

    How to add new fonts in CSS for local testing

    How to give a property to an element using its title in css [duplicate]