Video backgrounds in rows
Last updated
Was this helpful?
Last updated
Was this helpful?
To access the row settings for videos:
Open the row's settings.
On the Style tab, scroll to the Background section.
In the Type field, choose Video.
The following sections are available with settings for video backgrounds, as shown in this screenshot, listed below, and described in the following sections.
Background video Specify the source of the video plus other settings related to how and where the video plays. See the section below for more information.
Background overlay Overlay a semitransparent color on the video.
Background color Set a background color that displays until the fallback image or the video loaded. Depending on load time, the background color may never appear or may flash momentarily.
Top shape, bottom shape, shape container Add an Accept Builder row shape overlay to the top edge or bottom edge of the row.
In the Source field, specify one of the following sources:
Media Library
URL
Youtube or Vimeo
The following screenshot shows the Background Video settings when the source is the Media Library, In the table that follows, the settings for specifying the video source depending on the selection in the Source field, but the other fields in the Background video section are the same for all video sources.
From a design standpoint, a video background can add interest to a page – or it can detract from your content. For example, here's an example of ineffective use of a video background. Not only does the animation grab attention away from the call to action, but the video colors are so bright that the text is obscured.
Here are some tips for using video backgrounds more effectively:
Edit the video clips to make the file size as small as possible. Try exporting to 720p at 24 frames per second and a low bit rate.
If you're not playing the audio portion of the video (and in most cases that's a good idea), use a video editor to strip the audio track to reduce file size.
Keep the video as short as possible and loop it, which also reduces file size.
Use video clips that are related to the content, but don't use video backgrounds when you want attention on the content, such as the call to action in the previous example.
Set a semitransparent color overlay in the row settings if it make the row's content more legible. The most common settings are black (#000000) or white (#ffffff) with 50% opacity.
Not all mobile devices play video backgrounds, so provide a fallback image in the row settings.
Set a background color, which will display when the video (and optional fallback image) are slow to load, so visitors can start reading the content before the video starts. Use a dark color for light text and a light color for dark text.
Use a caching mechanism that lazy loads videos, which means the video isn't loaded until the visitor scrolls to that part of the page. This helps to improve your page load speed.
If you want a higher-resolution video or a longer video or an audio track, use a Video module instead of a video background.
Border Optional standard border settings around the row, including .
