video user experience
3 examples and 3 tips for engaging hero section videos
The hero section video has the potential of getting people excited about what you have to offer and encourage them to click through. But delivering a clear message over a dozen of seconds video is no easy task. The present article aims to distill the recipe for hero section videos that bring in more leads and conversions.
Daniel Engels December 23, 2022 · 6 min read
The hero section video has the potential of getting people excited about what you have to offer and encourage them to click through. But delivering a clear message over a dozen of seconds video is no easy task.
The present article aims to distill the recipe for hero section videos that contribute to increasing conversions.
Below, we will show 3 examples of hero section videos that convey the brand’s positioning particularly well, and then provide some general tips on how to create and integrate a successful hero section video.
3 Examples of Hero Section videos highlighting the brand’s values and unique selling points
Parachute Home
Parachute Home is an American direct-to-consumer brand of luxury bedding, bath, and home decor items. This company is a good example of an exceptionally successful DNVB. It started as an online-only business in 2014; by 2022, its website reached 1.5 million monthly visitors, generating over $150 million revenue.
The e-commerce homepage welcomes visitors with a hero section video of a family gathering in a living room. Everyone is dressed in cozy robes and loungewear. Small talk, kids’ play and holiday preparations tune the audience to the worriless state of mind, in line with the brand’s positioning.
The theme of the hero section video is further developed throughout the website. Each category page features several auto-play 10 seconds muted videos, where the same characters are seen in different homely scenes. This consistency makes the whole storytelling more trustworthy. [insert video: ALT: auto-play short video on a category page of e-commerce]
It should be noted that while this website’s hero section and product videos are excellent in delivering the brand’s message, the technical aspects of their integration are perfectible. All the videos are delivered in the less efficient mp4 format.
The hero section video (which is also the homepage’s LCP element) is delivered in 2 sizes, depending on the user’s device: 2880x1400 pixels for desktops and tablets and 750x540 for mobiles (regardless of the orientation). Unfortunately, the two versions weigh almost the same (5.6 MB and 5.47MB, respectively). Optimization of embedded videos could bring a significant reduction in the bounce rate (currently estimated at 64% for users on mobiles, according to data by SimilarWeb).
MamaShelter
Mama Shelter is a chain of stylish and relaxing boutique hotels. The chain’s specialty is its original modern design and relaxed atmosphere. All Mama Shelter hotels offer signature cocktails and homemade food in their bars and restaurants. Most of them also feature a rooftop terrace.
The first thing a user sees on the homepage is a hero section video illustrating the idea that the chain’s hotels are more than just places to stay. The auto-play muted video lasts 9 seconds and shows a bar menu, amenities like a basketball hoop, baby-foot and table games, and a cheerful barmaid serving ice cream.
Each of the chain’s hotels has a dedicated web page - with a custom hero section video shot in this particular location.
From a technical point of view, the Mama Shelter hero section videos are high-quality and yet lightweight. They are integrated as native HTML elements. Thanks to video optimization by TwicPics, Mama Shelter is able to easily adapt the video resolution and file format to each user’s device. For instance, an iPhone 12 Pro user would download a 500x1080 pixel version saved in the efficient WebM format — it only weighs 365 Kb. TwicPics also automatically generates the blurred poster preview, displayed while the video is loading.
Dyson
Dyson is a multinational manufacturer of vacuum cleaners, air purifiers, and hairdryers. With over 30 years of history, the brand has become a household name for its innovative approach to product design and engineering.
The 15-seconds autoplay hero section video is set in a high-tech showroom. The three flagship products are the Dyson Cyclone V10 cordless vacuum, the Dyson Pure Cool air purifier, and the Dyson Supersonic hairdryer. The products are seen in action, with sectional views of their inner components. The video highlights their unique design and leaves an impression of high performance and durability.
On the technical side, the video is delivered in the single MP4 format and in the single size: 960x540 pixels. It seems somewhat overcompressed, weighing 3.84 MB.
Tips for Engaging Hero Section Videos
Keep it short
You want to make sure that the video you use is visually appealing and relevant to your brand. Make sure it’s short and to the point so that viewers don’t get bored.
It’s generally accepted that hero section videos shouldn't go for longer than 30 seconds. The shorter the better, in fact. It's best if you keep it simple — don't try to include everything in one video. Instead of trying to give an entire overview of your business, focus on one aspect that makes you unique and put it in context with the rest of your content.
Use the right tone
A successful hero section video should be descriptive, not promotional. It should paint a picture of who you are, what makes you special, and why people should care. There's no need to tell viewers that they need your product or service — they'll figure that out when they read more about it in other parts of your website.
Hero section videos are supposed to be muted by default. It’s also advised to avoid including text. While the captions and subtitles are useful for other types of video content, there is no place for them in the hero section video. So it’s crucial to make it self-explicit.
Optimize the video and ensure it loads fast
As the hero section is one of the first elements the visitors see on a web page, any delay in its loading is frustrating. A slow hero section video might increase the bounce rate (especially for mobile users, who represent over 75% ot the internet traffic). It’s also a negative factor for SEO.
Video content can be rather heavy, so it is necessary to perform certain optimizations:
- avoid the loading of heavy video streaming players
- provide several versions of a video with different resolutions for desktops and mobiles
- deliver the video in an efficient format like WebM whenever it is supported by the device
- pre-load a lightweight poster preview, while avoiding any layout shift
One easy way to comply with all the best practices of hero section video integration is to use TwicPics.
Conclusion
Hero section videos are a great way to make your website more engaging, while also providing an answer to the question of "Why are you here?". It's important that the hero section video is compelling and engaging. It should be short, fast to load, and have eye-catching content that highlights your values.