Hero banner video loops on websites are becoming increasingly popular. You have probably seen about a hundred software startups and agencies using HTML5 video on the front pages of their sites (we all love shots of people scribbling on white boards, coding with their headphones on, and chatting in conference rooms, right?). They’re a cool way to bring some motion to static designs and quickly convey a mood or vibe for the site visitor. Since the hero banner is the start of your customer’s journey on the site there is opportunity to convey your main themes or messaging quickly with HTML5 where images and text can often fail to capture a viewer right away. eCommerce brands can really bring some dynamism and lifestyle into their site designs with HTML5 implemented product videos.
Video Review Labs uses an HTML5 loop on our homepage to feature some of our best and brightest eCommerce product video work. Our customers can land on the site and quickly get a sense for what we do and the quality of our product video work without even scrolling the page. eCommerce brands can do the same with product video content. Here are a couple tips on how to handle HTML5 video on your site:
1. Content
The secret sauce here is finding the right balance between product shots and lifestyle. A loop of just product beauty shots can get boring really fast. A loop of nothing but lifestyle footage can be confusing if you’re not a major brand where visitors already know what products you sell. Strike a balance between the two to create a mood and get visitors interested in different products. People like to see products in action when applicable. This can be easy if you’re selling surfboards or workout accessories. It can be tougher if you’re selling an aromatherapy kit or a bluetooth speaker. So use product shots in contextual scenarios: show the speaker by the pool getting splashed or the aromatherapy kit in an upscale living room with a woman reading in the background.
2. Format
Use a pro when implementing HTML5 video. It can be easy to break a website and really difficult to fix it. We have found the most universal video format for HTML5 (while there are others available) is MPEG-4, also know as MP4, encoded in H.264. These types of video files are highly compressed without being too lossy with quality. So they are lightweight and play smoothly on the site. File size really depends on your hosting. The VRL site was simple enough where we could host a 21 second loop at 5mb. But Netflix can run hundreds of 2 hour long movies without skipping a beat. So the more robust your hosting platform the more latitude you have with video length and quality.
3. Optimizing for mobile
Our site, perhaps like yours, is responsive so it breaks down to fit the screens of different devices automatically for a more natural user experience. It is possible to encode multiple video formats so an HTML5 loop still plays when you visit a site on your tablet or phone. However, it can get a little tricky creating different files and targeting different browsers and devices. So we have found the best thing to do to keep things fluid and lightweight is to create one video format that is universally supported by desktops and tablets. Then force the banner to fallback to a .jpg image from that video when viewed from a mobile device and any other outdated device that does not support HTML5 (like that palm pilot, you weirdo). We do this because data coverage for phones can be an issue which causes videos to play laggy or load too slow. Same goes for devices that have weaker processors. We want to keep the user experience simple, clean, and quick.
Get in touch with the eCommerce product video experts at Video Review Labs to discuss product videos for your eCommerce brand and how we can implement beautiful HTML5 video on your site. Reach out to us here.
