Monday, October 19, 2015

Making a page with a video background in HTML5

I know you have seen lots of new pages popping up all over the internet that have flashy looking videos as their backgrounds.  Surprisingly, it generally looks very good. So I am going to create a page that will be used as the homepage/landing page for a website, that will have a space for a video background.

Ok, this was pretty simple. All I had to do was include the following HTML in my index page.
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div><!-- end video-container -->
</div><!-- end .header-unit -->

With the following css:
.header-unit {
    height: 100%;
    position: relative;
    overflow: hidden;
}

#video-container {
top:0%;
left:0%;
height:100%;
width:100%;
overflow: hidden;
}
video {
    position:absolute;
    min-width: 100%;
    min-height: 100%;
    z-index:-10;

}

This created the video background and formatted it to zoom in to fit the page.

Done!

No comments:

Post a Comment