Add a video background to a banner

Banners and sections build their background from layers: image, video, color, blur, border, and shape divider, stacked in the order you add them. A video background is simply a video layer, usually with a color layer on top so text stays readable.

Add the video

  1. Select the Banner or Section and find the Layers panel.
  2. Choose Add layer → Video.
  3. In the Video field, paste a YouTube or Vimeo link, or pick an MP4 or WebM file.
  4. Turn on Loop for a continuous background.
Banner settings in the Flatsome Builder with the Add layer menu open under Layers and the Video option highlighted
The Video layer options with the video field, holding an MP4 file from the media library, highlighted and Loop set to On below it

Background videos always play muted, start automatically, and show no controls. They only load while the block is on screen, so a video further down the page costs nothing until the visitor gets there.

Keep the text readable

Add a Color layer above the video with a dark color or gradient and lower its Opacity. The layer at the top of the Layers list is drawn in front. On a dark video, set the Color scheme to Dark on the Banner’s Text Box (or on the Section) so headings and buttons switch to light colors.

The Color layer options with a dark gradient and the Opacity control, set to 0.8, highlighted. The layer list shows Color above Video above Image

Phones and slow connections

Add an Image layer below the video with a still from it. It shows while the video loads and wherever autoplay is not allowed. Keep the file small: a short clip encoded at 720p in MP4 is usually plenty, and your host’s CDN can serve it. To skip the video entirely on phones, duplicate the block, give one a video layer and the other only the image, and use the visibility settings to show each on its breakpoint.