Like Us on Facebook

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

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>

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 1 )

Israel Goldwasser:
Hi, We’ve developed a new HTML5 player that plays with transparency and looks exactly like the old Flash player (not with a white background - real transparency over Chrome and FireFox browsers). Here’s an example: http://videostir.com/html5/
Admin:

    Leave a comment..

    Click to login.