How to Use Full-Width Background Videos

To make your website truly engaging, you need to use high-quality images and videos to accom-pany your written content. Websites must ensure that images and videos look great on desktop displays, without slowing down load times for mobile users. While building a template that caters to both desktop and smartphone users can be difficult, this is one challenge we often find can be addressed by using full-width background video.

How to Use Full-Width Background Videos

Submitted by Hatch on Thu, 06/11/2020 - 8:00am
Full Screen Banners

Within the Hatch website customization tools, you can use our Content Section titled “Full Screen Banner” to set a background color or upload a background image. For best results, images should be 2,600 pixels wide. While full-width images are great, a video can be even more engag-ing. To do this, upload a video to Vimeo or YouTube, then paste the video URL in the Background Video field. Choose a dark background color in your settings so that text over the video appears white.

Right
Automatic Playback and Audio Stripped

Your full-width video is meant to be visually engaging — but not the same as an ad. No one wants an autoplaying video to have sound. Because of this, our Full Screen Banners are set to autoplay videos while stripping out the audio. If you want a video with audio on your site, we recommend using a different content section that allows you to feature video as the content display, rather than a background element.

With engaging cinematography, a full-width background video is a great way to help your website stand out from the competition. If you need help uploading your video, feel free to reach out. We’ll be happy to help you make the most of this exciting visual feature.