Using Video Headers on the Homepage of Your Real Estate Website

If the eyes are the windows to the soul, then the homepage of your real estate website is the window to your business. So how do you design it in a way that encourages visitors to explore the rest of your site?

Try video.The dynamic quality of video backgrounds captivates visitors at first glance and instantly distinguishes your website. Video conveys emotion and communicates messages in a way that static forms like text and images cannot.

And you don’t even need a full-scale video background to grab attention – video headers can be just as effective.

Tips on using video headers

1. Use high resolution footage

   Stunning video headers begin with high-resolution footage. Using a low-quality flick with poor lighting or blurry images can diminish the video header’s effectiveness. Invest in a well-shot video with clear images and sharp colors. Blurred images ought to be a deliberate aesthetic choice, and not the result of low-quality footage.

2. Tell a story

   The video header should tell the story of your brand both as a self-contained component and in conjunction with other elements on the homepage. It shouldn’t be just a tacked-on piece. It also lets you take story telling in a new direction – take advantage of its ambient nature to present your brand’s narrative.

3. Make sure it echoes your brand

   Adding a video header isn’t about following a web design trend – it’s about reinforcing your brand identity. The video header should complement other elements found in the homepage and its tone and voice need to be consistent with your overall branding.

4. Create contrast between the video and page text

   Placing light-colored text over a dark video and vice versa creates a strong contrast. The full effect is more dramatic when you use simple, uniform footage with few colors. Weld Realty is a great example of this.

   Generally, white text over a dark background works best for minimal copy, and if you expect visitors to scan instead of read. Dark text over a light background is best for paragraph text, which visitors have to read instead of scan.

5. Set the video to mute by default

   Your video header’s accompanying sound or music may be too intrusive when it’s on auto play, especially for users who dislike sudden or loud noises. Besides, it would be far more effective if you play up imagery and movement rather than sound or dialogue to tell your brand’s story.

   If you really must use music or sound, make it optional for visitors, and choose a score that evokes the atmosphere you want to create. 

6. Keep proportion in mind

   Video backgrounds don’t always have to adhere to a full screen interface. As opposed to full-screen video backgrounds, video headers have lesser height, giving visitors access to other areas of the page.

   The video header’s dimensions and placement must flow with the page’s overall layout. While video backgrounds and headers often span the entire width of a page, you don’t necessarily have to follow this trend. 

7. Incorporate parallax scrolling

   Parallax scrolling brings the feel of three-dimensionality to a homepage by getting the background to move at a slower pace than the foreground when a visitor scrolls down different content sections.This creates an intriguing, 3D-like effect and allows for a more interactive page.

   Incorporating parallax scrolling into a page usually involves several plug-ins or custom development. It also entails a specific set of development techniques.

   Ryan Hardy uses parallax scrolling to give visitors a unique experience. 

8. Ensure browser compatibility

   Check for browser support for native file types. Ideally you should go for the most broadly supported video containers and codecs. The most popular file types are VP9/WEBM and H.264/MP4. Another strategy is to keep your intended audience in mind by tracking which browsers they use regularly and sticking to compatible file types.

9. Think of file size

   Compared to their JPEG counterparts, videos have more of a natural capacity for scaling. This means that your video header is likely to look crisp and impressive even when the file size is reduced. A large file size will take too long to load on your homepage and can potentially cause visitors to leave your website.

10. Use existing resources

    Hard coding from scratch is always an option, but there are existing plug-ins out there for JavaScript and WordPress. Embedding a video into your website header can also be done with jQuery and HTML. 

    These plug-in options are still limited since video backgrounds and headers are a fairly new development in web design. But if you can find the right, it can help you cut back on coding time.

11. Use free videos

    Online repositories like Pexels and Coverr let you download stock videos and video backgrounds for free. Using stock videos spares you the expense and effort of producing one yourself. Just remember to look for one that is reflective of your brand.

    The downside is that another company might be using the exact same stock video background, which defeats the purpose of creating a video header to build your unique brand identity. In which case, your best option would be to customize stock video backgrounds as much as possible.

12. Change your video headers seasonally

    Another tip is to change video headers to coincide with the season or special occasions, but still retain your brand’s tone and personality throughout.You can keep your homepage current by creating video headers meant for spring and winter, for instance, or occasions like Christmas or Father’s Day.

More on video headers

While the use of video headers is a relatively new practice in web design, the way it’s done will evolve as new advances and development techniques emerge over time. Since it hasn’t reached saturation point yet, however, it gives you the opportunity to set yourself apart from other real estate websites and tell your brand’s story like never before.