Using Video as a Background in HTML 5

    User Rating: 5 / 5

    Star ActiveStar ActiveStar ActiveStar ActiveStar Active
     

    HTML 5 has a nice new tag called <video>, this tag presented as an alternative to flash video. One of the advantage of using <video> tag is it's supported by all modern browsers. In this tutorial I will show you how to make a video as a background of div, here are the steps:

    HTML 5 Video as a Background

    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

    Please publish modules in offcanvas position.