Using Video as a Background in HTML 5

HTML 5 has a nice new tag called

1. Make a wrapper for your video

To make a video as a background, first we need wrap that video tag inside a wrapper. Here is the example:

<div id="myvideo">
	<div class="video-wrap" id="video-wrap">
		<video autoplay="autoplay" loop="loop" id="usbvideo" tabindex="0" >
			<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
			<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
			<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
			<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp">
		</video>
	</div>
	<div id="mycontent">
		<div id="header">
			<p>Lorem ipsum dolor sit amet</p>
		</div>	
		<div id="body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
		</div>
	</div>
</div>	

2. Make the position absolute

And the last thing is to set the position of the video wrapper to absolute, here is the css

#myvideo{
	width:560px;
}
#mycontent{		
	position:relative;
}	
#video-wrap{
	position:absolute;			
	overflow:hidden;
}				
p{
	text-align:center;
	color:#ffffff;
}

That’s it. you can see the demo in here.

Thanks to techslides.com for the sample video