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>
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>
<source src="html_vid.webm" type="video/webm">
<source src="html_vid.mp4" type="video/mp4">
</video>

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/
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:
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1182374 Views
How to Create Chat Application in Android Studio 152899 Views
How to Create a Shopping Cart Application in Android 116235 Views