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 to target last TD cell?

    How to display a css animation in the center of the screen

    How to shrink the width size hyperlink?

    How to make CSS Multi Column layout over html to move between the columns on user click

    how to make div with image like below in html and css

    How to hide content that is not wrapped by tag using only CSS?

    How to prevent rendering css when loading stylesheet from local storage?

    How to make input[type=text] to fill remaining horizontal space?

    How to make a slanted css background without transparency overlapping?

    How to change where a CSS transition starts from?

    DevTools: How to visualize scss changes automatically without the need to save

    How to make my PHP code, display in html table?

    How do I make a line break between divs inside a box?

    How to display multi-column article from a single column article data source?

    How to fix image loading time with my image slider?

    How to make scrollable table's header fixed using css fixed position property?

    How can I format outer table but not inner table

    How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus?

    How to make text vertical in a jQuery UI Layout toggler?

    How to create an Hours of Operation list with HTML and CSS?

    how to make “before” li is fixed at the bottom of li?

    css hover element to show child, how can I keep the hover css on the parent when I mouseover the child?

    Using CSS to show/hide content. How do I make hide the default

    How to create an image sprite that stretches both horizontal and vertically as a single image?

    How to hide element with css with specific title?

    How to create desired form with css without using too many div tags?

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    How to allow scroll on mobile

    How do I insert content after text in an html element using CSS?

    How to use Chrome Inspector to show the popup css for a jquery plugin