HTML 5 Video as a Background

Using Video as a Background in HTML 5

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:

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 techslides.com for the sample video

Leave a Comment

Your email address will not be published. Required fields are marked *