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="" type="video/webm">
    			<source src="" type="video/ogg">
    			<source src="" type="video/mp4">
    			<source src="" type="video/3gp">
    	<div id="mycontent">
    		<div id="header">
    			<p>Lorem ipsum dolor sit amet</p>
    		<div id="body">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>

    2. Make the position absolute

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



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

    Thanks to for the sample video

    Please publish modules in offcanvas position.