Background video

What is the background video section?

The Background video and Background video with countdown timer sections display prominent text with a video playing in the background. These videos play automatically on a loop without sound, allowing promotional messages to be shared while adding energy and movement to the page. Background videos are designed purely as visual elements; if sound is needed, a Media with text or Video carousel section could be used instead.

Showing a video in the background can improve the overall customer experience by showcasing your products or services in action. Videos also tend to be more engaging than static images, which could encourage visitors to stay on your site longer and potentially increase conversions.

How to create a background video section

How to maintain speed scores

Videos by their nature are large and take time to load. Beautify includes additional settings to help maximise page speeds and ensure that 'above the fold' content loads as quickly as possible.

Tips to maintain speed scores while using video:

• Avoid placing the Background video section near the top of the page, as the browser must wait for the video to start playing, which can increase the Largest Contentful Paint (LCP) score.
• To mitigate this, enable the Load the section without animation setting.

Lazy loading

Beautify brings lazy loading capability to videos as standard - meaning videos will only load as they're about to become visible on the page (i.e. scrolled to). The Background video section contains a Lazy load the video setting to selectively enable this. Consider deselecting this setting for the following reasons:

• The video is at the top of the page - in which case you'll want the video to load as quickly as possible (and not be lazy loaded).
• You want to give the background videos the best possible chance of auto-playing on older devices.

FAQs

Why is the my video not playing on mobile?

Whether a Background video plays on mobile is controlled by the device/browser rather than the theme. Background videos can slow down page loading, use a lot of mobile data, and consume the device's battery.

Your device/browser may decide not to play the video if:

• Your phone is low on battery or is in 'Battery saver mode'.
• Your data signal is weak.
• The video has sound.
• The video is too large.
• The current page contains multiple video or is slow to load.
• The video has been encoded in the incorrect format (see the next FAQ for more).
• Or any combination of the above.

Read Google's Autoplay policy in Chrome article for more.

Why is my MP4 video still not playing/showing as just black?

Temporarily change the video URL to this:

If this plays, then your video has not been encoded correctly and it will need to be encoded in the h.264 formats. If you search for 'h.264 mp4 encoders' online, you should find sites that provide a facility to do this.

Why does my video have no sound?

Background videos don’t play sound. They are auto-playing videos that are designed to sit in the background to add a visual design. If you want to have videos that play sound, you can use the default video section.

Browsers don’t like auto-playing videos with sound when you land on a page, most will block the video causing issues. Also, it can be a negative experience for a customer to land on a site and be greeted with a sound that they didn’t accept to play.

Read Google's Autoplay policy in Chrome article for more.

How big should my video file be?

Keep it under 3mb if possible, although there are no limits imposed. Remember, the video can loop so if it's possible to make the loop seamless, the video can appear to be longer than it actually is.