Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

video

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

like image 478
duhzecca Avatar asked Jun 18 '14 18:06

duhzecca


1 Answers

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

like image 119
Rachel Gallen Avatar answered Oct 19 '22 12:10

Rachel Gallen