HTML5 Video Background for Customers
Here at Insivia, we are always looking to push the envelope by using new techniques and unique ideas in web design. Recently, I had the pleasure of working on a new site for one of our awesome clients. Every design is a fun challenge in its own way, but this site called for a fullscreen video background and I couldn’t be happier to get my hands dirty and get it working.
I know. The idea sounds a little scary at first. “Video… in the background? Won’t that distract users from the information and conversions?”. It certainly is a big question mark, however I believe our team did an excellent job of turning a potential issue into a win, with stellar results for the client: a unique and an awesome-looking website.
First off, the type of videos we filmed are very subtle. They are essentially ambient videos, capturing a minute or so in the life of an office building: one minute in the life a reception area, conference room, and hallway. The videos can’t be understated further: there is no sound to annoy users and prompt bounces. Beyond that, the post-production blurs the video. So, although you know what you are looking at, there is nothing to focus on and take your attention away from the foreground. Also, the subject matter of the videos has a very light color palette which works well with some of the darker elements we position over top the video.
Next, we considered audience. We implemented a multi-tiered solution that works differently in Internet Explorer, Firefox / Chrome, and mobile devices. Older versions of Internet Explorer use flash to display the video. More modern browsers make use of HTML5 video, which is the direction the industry is headed, thus helping to future-proof the solution. Because the site isn’t fully mobile optimized, we display a standard background image on mobile devices and tablets.
Lastly, we have several loading and fallback scenarios to serve static images. For instance, if the video fails to load, the browser is too old, or the browser doesn’t have Javascript, the site will still look nicejust without the video.
Overall, we came up with a complex solution that delivers a visually intriguing design element, yet is still subtle to the user, and allows the focus to remain on the content.
Check out OneCommunity’s Website where we utilized a video background.