How to Create a Hero with a Video Background
Video content remains some of the highest-converting content on your website, and hero images are one of the first ways your audience interacts with your brand. Here's how to combine the power of video with the eye-catching design of a hero banner.
Videos are incredibly effective in catching a visitor's attention. Since the hero section is the first thing the visitors see when they land on a page, using a video background will instantly attract their gaze. This helps your visitors notice the call to action, and it can dramatically increase the conversion rate for your business.
Remember the phrase "Show, don't tell." People are drawn to visuals as visuals are easier to process than words. Watching something requires much less cognitive load on their part than reading. And statistics have proven that people love watching videos as long as that content doesn't interrupt what they're doing on a website.
According to Forbes:
- Video is projected to claim more than 80% of all web traffic by 2019.
- Embedding videos on landing pages can increase conversion rates by 80%.
- 90% of customers report that product videos help them make purchasing decisions.
Now that we talked about the benefits of using videos on your website, let's get to how you can display them.
Here is a sample HTML code:
HTML
Let's break the code into pieces and see what's going on in each line:
We start with the header tag. The header element is one the semantic document tags introduced with HTML5. It is used to define a header section for the website.
A banner role represents general and informative content frequently placed at the beginning of the page. This usually includes a logo, company name, search icon, photo or a tagline.
Next, we put the code of our video:
We use attributes such as "autoplay", "loop", "muted", and "poster".
Autoplay
The autoplay enables the video to play automatically when the page is loaded. You want to enable autoplay so that the visitor doesn't have to manually start the video.
This may cause some issues with mobile devices which we'll address later.
Loop
The loop setting restart the video after it ends. Whether you should enable loop depends on the goal you want to accomplish. For example, if you have a CTA such as a registration form, you may want to disable loop to avoid distracting the user.
Muted
In majority of cases, you want to mute the audio as people will be irritated by unexpected audio while visiting websites. It is also recommended that you remove the audio from your video files to reduce the file size.
Poster
There are two uses of the poster attribute. With the poster attribute, we supply an image file that will act as a placeholder until the video loads on the browser and starts playing.
The second use is to supply an alternative to the video in case the browser is old and/or can't display the video.
File Types
There are various media file types but the most commonly used formats are mp4, webm, and ogg. Different browsers support different file types for example, while Mozilla Firefox supports webm and ogg, Safari supports mp4. It is necessary to give sources to each type of file to ensure your video will work properly on all browsers.
Displaying on Mobile Devices
Autoplay on mobile devices can cause excess data usage so some mobile devices may not play the video at all or people may intentionally disable the autoplay feature on their phones.
We used an img tag so that in order to prevent too much data usage and speed up the website, a hero image will be displayed on mobile devices:
You can prevent your hero video from downloading on mobile screens by adding this code to yoour CSS:
Make the Text Stand Out From the Video
It is important that the text over the video stands out so that it is noticeable and easier to read. If your video is darker. use light-colored text and if your video is lighter, use a darker colored text. Also, using shapes with contrasting colors and big font sizes will make your text stand out more.
Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
