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