Part 4 How To Write The HTML5 Code Video For A Web Page

Write The HTML For Background Video

Fullscreen background video requires some CSS and HTML5.

Though web video may seem to be a rather odd subject in this area, we can’t deny that that graphic designers are now designing web pages and that video – especially full page background video-  has become a “must have” feature in a growing number of web sites. Which raises the inevitable question :”How do I do that?” Having just co-authored a book on this very subject, I thought I would share some of what I learned during the creation of the book.

The first thing you need to do is to stop looking at video as “video” and regard it as a series of 1’s and 0’s streaming into the browser. From there, the browser assembles those 1’s and 0’s into the video the user will watch. The key aspect of this is how fast those 1’s and 0’s move into the mobile or desktop browser( The term is Bitrate) and how fast the device can translate those numbers into the video. Thus the first rule of streaming video is : Keep an eye on the pipe. If you don’t the video will either take forever to load or stop and start during playback.

Sites using background video try to keep the clips to around 20 seconds in duration and the audio, if there is any, is kept short simply because they have no control whether the video will be viewed on a smartphone or a desktop. Even then there are some code tricks that will “sniff” the viewport and load the appropriately sized and formatted video.

You also might notice many of the videos don’t have a lot of color or are greyscale. This is deliberate. Doing this reduces the “hit” on the processor as it renders the colours. This can be done in a video editing application. One other approach, which can be combined with fewer colours, is to reduce how fast the video streams.

This actually reduces the file size, which makes the data stream easier to manage. By keeping the bitrate to under 2.5 kilobits per second (kbps), the data stream can pretty well be handled by everything from mobile to desktop.

The code that makes Fullscreen Background Video work is actually quite uncomplicated:

You create a CSS div to hold the video and use it to put the video into the page’s background. The CSS code is:

#video_bkgrnd{

       position: absolute;

       bottom:0px;

       right:0px;

       min-width:100%;

       min-height:100%;

       width:auto;

       height:auto;

       z-index: -1000;

       overflow:hidden;

}

The keys here are the width, height and z-index properties. By setting the min-width to 100% and the width to auto, you are ensuring the video retains its proportions regardless of whether the [age is being viewed on a smartphone or a 50-inch HD TV screen. The overflow:hidden property makes sure that any video that may spill out of the div is not seen.

The “magic” is found in the z-index property.  This property can have either positive or negative values.  Positive values place the video above everything on the page and negative values place it under everything. The use of -1,000 ensures it will be “below” anything placed on the page.

With CSS in place you can then add the HTML5  <video> element that points to the video. The code is:

<video id="video_bkgrnd" poster =“img/TropicalRain.jpg” muted autoplay loop >

       <source src="video/TropicalRain.mp4" type="video/mp4">

       <source src="video/TropicalRain.webm" type="video/webm">

       <p>This browser can't show HTML5 video.</p>

</video>

The code is the bare minimum required to play HTML5 video. You point to the div that holds the video, add the path to the poster frame, kill the audo, autoplay the video and have it loop. The next two lines point to the video and the last line appears if the browser isn’t HTML5 compliant.

One final note. The poster frame is there for a reason because most phones and tablets do not support autoplay.

So there you have it, the code you need to know to play Fullscreen Background video.