How to Add a Video Background to Your Website

A video background can add movement to a hero area or another section of your Site Before Night website. You can add a supported YouTube or Vimeo video behind the section's regular text, buttons, and other content using the section's Style settings.

Before you add a video background

Video backgrounds currently support videos hosted on YouTube or Vimeo.
Background videos play without sound.
The video repeats on a loop.

Open the video background controls

Choose the section

In your website editor, select the section where you want the video to appear in the background.
Open the Style tab

Edit the selected section and open the Style tab in the section editor.
Turn on the background option

Find Background Image or Video and turn it on if it is not already enabled.

Once this option is enabled, the editor will display controls for adding either an image or a video to the section background.

Add your video and save the section

After the background controls are enabled, finish the setup by adding the video link and adjusting the section so your content remains easy to read.

Select Add Video

In the Background Image or Video area, choose Add Video.

Paste the video URL

Paste the URL of the YouTube or Vimeo video you want to use, then select OK.

Adjust the overlay if needed

Use the Overlay Color and Opacity settings when needed to improve the contrast between the video and the content displayed over it.

Save your changes

When the section looks the way you want, select Save to keep your changes.

Keep text readable over the video

A moving background can compete with headings, buttons, and other important content. If the section becomes difficult to read, adjust the overlay color or opacity until there is enough visual separation between the video and the content in front of it.

What to expect from a video background

YouTube or Vimeo Use a supported video URL from one of these services.

No background audio The video's sound is not played when it is used as a section background.

Continuous loop The background video repeats rather than playing only once.

Need more website help?

Browse more customer editing guides in the Website Help Center. If the controls described above are missing from your editor or you run into an unusual website issue, use Website Technical Help instead of changing technical settings or adding custom code.

Browse the Website Help Center Website Technical Help