Tips for using video backgrounds in rows

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 an 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.
  • Strip the audio out of the video. Browsers usually won't play the audio when it's in a row background, so the audio is just making the file bigger.
  • 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.
  • Choose a color overlay in the row settings to make the row's content more legible. The most common settings are black or white 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.