Create a homepage background video
1. Decide if a background video is right based on your brand and homepage goals.
Answer these questions to decide if a background video is right for your site: What industry is our brand in? Industries like food service, hospitality, retail, and entertainment are well-suited for a background video. Is the goal of our homepage to highlight our text offer? If so, a background video may be too distracting. Does the video further our goals? A background video allows you to show how your products work and sets the tone of your business.
2. Choose a video theme that provides valuable context for your brand and meets your homepage goals.
Choose your video content based on the purpose of your homepage, the preferences of your target audience, and the mood you’re trying to convey. For example, The Hidden Worlds of the National Parks wants to get people excited about exploring national parks. So, the background video comprises nature clips that draw the viewer in. Meanwhile, fashion label Venem chooses to feature its new merchandise on models who appeal to its target audience.
3. Use edited or stock footage that’s under 30 seconds and fits your chosen content theme.
If you have the resources, like behind-the-scenes or company culture shots, shooting your own footage is likely the better option. Use a tripod to stabilize footage and avoid excessive motion. Some stock footage sites are Pixabay (lots of options), Pexels (short clips), Videezy (good for nature and aerial shots), and Clipstill (GIFs and loops). To set the tone of your video, be sure to pay attention to critical elements like color, music, and frame rate. If you want to include many images, a looping video with many short clips is a good fit. For footage that tells a visual story, a 30-second clip with the right lighting and frame rate can be very effective.
4. Export your compressed video as a .mp4 file, and consider uploading to a video host like YouTube or Vimeo.
The video should: Be compressed to 720p for a fasting loading time or 1080p for optimum quality. Use an .mp4 file format. Have a 16:9 widescreen aspect ratio. Be around 2 MB. Have no audio. Many experts recommend removing audio for a faster load time. Consider using a video host like YouTube or Vimeo. Some content management systems, like WordPress, let you self-host the video on your website. However, this can sometimes lead to browser compatibility issues, longer load times, and server strain. The solution is to work with a third-party hosting site, upload to your CMS, and provide a link to the video.
5. Add your background video to your CMS using a plugin, page builder, or template that works with your CMS.
For your video project, take into consideration your web design experience level, resources, and the CMS you use, like WordPress, Joomla, or Drupal. Some options that don’t require coding: Themes or templates: Search video background on ThemeForest or your CMS theme library. Choose a theme that has a video background option, and upload your video. Video background plugins: Choose a video background plugin for your CMS, like Smart Slider 3 for WordPress, and upload your video or add a link to your video host. This option comes with unique customizations, like overlays and opacity filters. Page building plugin, like Elementor or Divi for WordPress: Page builders have drag-and-drop capabilities and provide many options for easy video customization. Website builder: Upload video directly to Wix or Squarespace if you already use a website builder. On Wix, Upload media > select your video > Change Background.
6. Add text to the background video to provide more context about your brand.
Keep the text short, concise, and relevant. For example, provide a headline, subheadline, and CTA button. For example, the Project Skin website has a video that sets the tone of the page and shows brief shots of some of its services. The foreground text is concise: Aging gracefully together: Experts in aesthetic medicine, laser, and advanced skincare. The words provide context for the video, highlighting the company’s value proposition.
7. Experiment with opacity and contrast to make the foreground text stand out.
Use your website builder’s toolbar to customize your video and make the foreground text stand out. Ways to alter your video appearance: Add a color overlay that matches your website’s main color using the Background Overlay tool in your website builder. Add a grain, blur, or film filter to the video for a vintage look or to disguise compressed video quality. You may need to add a filter in your video editing software, like Lightworks or Final Cut Pro, before uploading to your CMS. Add a light or dark overlay that contrasts with the text color. Decrease the video opacity to keep the focus on the text. Look for the Opacity slider. Change the playback amount or Repeat function to make the video loop.
8. Make the video accessible by adding a fallback image and alt-text. Consider using an image for mobile.
Using your chosen plugin, template, or page builder toolbar, look for Accessibility settings options, including Fallback Image and Alt-text description, and perform actions to make the site more accessible: Upload a static image from your video, or choose a color background that will appear as the fallback image if video playback isn’t working. Provide an alt-text description that explains what the video depicts. Many mobile devices block videos by default, so consider adding responsive breakpoints to accommodate the smaller screen size.
9. Run an A/B test to compare the effectiveness of a background video versus a static image.
Set up an A/B test with a tool like AB Tasty, Optimizely, or Omniconvert. Compare metrics, like time-on-page, bounce rate, and conversion rate, for a background video versus a static image.