How To Set A Background Video in a Website Using HTML5 and CSS

In HTML&CSS  |  Last Updated on Thu, 05 May 2016

This post explains How To Set A Background Video in a Website Using HTML5 and CSS. Good background video makes user stop to your website, and spend more time to your website. Which is very good for your website. And also this video could be your intro video of your website. So lets start with css

CSS

<style>
        video#vidbg {

        position:fixed;
        bottom:0;
        right:0;
        min-height:100%;
        min-width:100%;
        height:auto;
        width:auto;
        background: transparent url(bg.jpg) no-repeat; 
        background-size: cover;

        }
   </style>

Now I going to create video using html5. You have to remember that below video tag is a html5 tag within this tag you have to use some attributes like loop, autoplay, muted and poster. Loop and autoplay is use for looping the video and autoplay. Muted is use for stop background sound and poster is use when some browser does not support html5 then it would be a still image, within this video tag you have to write you have to write minimum two types video format for different browser. Here i have used only two format webm, mp4 and another one ogg format.


HTML5

<video id="vidbg" autoplay="" loop="" muted="" poster="bg.jpg">
       <source src="html_vid.webm" type="video/webm">
       <source src="html_vid.mp4" type="video/mp4">
 </video>