Web Design Daily, Cincinnati Based Online Magazine

Web Design Daily Magazine

Thanks for checking out our Web Design Magazine blog! Looking to have us design a website, or provide our SEO services? Learn More!

Full Width Video Background Website

HTML Video Background Tutorial



I recently had a client looking for me to clean up his existing website which was on a JavaScript/HTML/CSS template for a full width html video background effect.

I quickly explained to the client that the website does not need to be on such a template. With a little CSS and HTML5 I was able to accomplish the same effect with faster load times and with out the mess of the code the template required to wade  through to put in a video background on each page.

You can accomplish this effect with a template such as:

http://syddev.com/jquery.videoBG/

…. but they are very cumbersome and if you check out the website, you can see its very clunky looking as well as slow to load.

I was amazed to see that no one was really discussing some minimal ways to accomplish an html video background on a website. Working with Javascript can be very frustrating for a novice, so I feel that this method will work for most people!

Let me show you how to accomplish an html video background with some clever CSS and HTML5






The HTML

The HTML5 is text book video embedding. Insert your videos from your server in the correct codecs for cross browser support using this code.

You can read more about HTML5 video embedding here: HTML5 Video Embedding W3Schools


<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/splash.webm" type="video/webm"> 
<source src="videos/splash.mp4" type="video/mp4"> 
Video not supported </video>



Using ogv in addition to webm is optional, but can cause some browser compatibility issues. I recommend just using webm and mp4 to cover all browsers. The code for the ogv is:

 <source src="videos/splash.ogv" type="video/ogg ogv"> 




The CSS

The CSS is what accomplishes the html video background effect. The position: absolute allows us to anchor the video from the bottom right part of the browser. This can be changed to top left, if your video has more focus on subjects in the video by changing the code to top: 0px; left: 0px;.

The bread and butter of this CSS is the width: auto; height: auto;, coupled with the min-width: 100%; min-height: 100%. This tells the browser to always have at least 100% of the video showing for both width and height. Anything over 100% is hidden over the browser space with overflow:hidden. This will work for any aspect ratio video, but sticking to the aspect ratio of a modern browser window will give the best results.

Dont forget the z-index: -1000px; to make sure the video is in the background of the website.

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

If you would like an overlay on top of the video background for a nice effect, you can use something such as this code here.

An image such as this would be suitable for use on the background: Pattern Image

#video_pattern {
background-image: url(../images/pattern.png);
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}




And that’s all there is to the html video background!

I hope this helps you out with your next html video background website. A word of warning: don’t expect this to work on any mobile or tablet devices. You can implement a splash background for your html video background by using a screenshot within the video tag! Feel free to use this code on any of your projects!

christopherkoelsh 300x168 Full Width HTML Video Background Tutorial

You can view the end result here: Video Background Website

If you have any questions, feel free to comment.

 Full Width HTML Video Background Tutorial

About Tim Carpenter

Tim Carpenter has written 7 post in this blog.

I am lead project manager at Kesil Consulting. I specialize in CSS/HTML and some PHP. I graduated from Northern Kentucky University with a degree in Computer Information Technology and another degree in Anthropology. I love lamp.

Related Items:

Tags From the Blog:



© 2012-2013 Kesil Consulting All Rights Reserved -- Copyright notice by Blog Copyright

Pin It
[ + ]