Create dynamic visual effects with videos that automatically play behind your site's content.

Upload or embed background videos to your page sections to add more dimension to your layouts or to create a video banner.

Also try: Adding background images or background art.

Background videos for page sections are available on version 7.1. If your site is on version 7.0, you can add video backgrounds to cover pages and banners on some templates.

Video on adding video backgrounds

This video shows how to add and customize a background video.

Add a background video

You can add video backgrounds to block sections, portfolio sections, and auto layouts. Video backgrounds don’t have sound and play on a loop.

To add a background video:

1. Open the Pages panel.
2. Click the page where you want to add the video, then click Edit.
3. Hover over a section and click Edit Section.
4. Click Background, then click Video.
5. Click Upload file (limit of 60 seconds), Select from Library, Browse background videos, or Add from link (YouTube or Vimeo). Vimeo requires a paid plan to add a background video from a link. It’s not possible to use embed code for background videos.
6. After adding the video, set the background width to Full Bleed (the video touches the edges of the browser) or Inset (the video appears with a solid-color border around it). When set to Inset, you can change the color of the border.
7. Optional: Click Filter to add a filter overlaying the video. Filters also overlay the mobile fallback image.
8. Optional: Change the playback speed by clicking + or - next to Playback Speed.
9. Optional: Add a mobile fallback image.
10. Click Save.

Add a mobile fallback image

Depending on their connection speed and browser version, background videos may not load for every visitor. You can set a mobile fallback image to appear when the background video can't load or when the video is loading. For the best results, format your image for web display before uploading it.

To add a mobile fallback image:

1. Open the Pages panel.
2. Click the page with the video background, then click Edit.
3. Hover over the section and click Edit Section.
4. Click Background, then click Video.
5. Under Mobile fallback image, click Add an image to upload an image, reuse an image from your library, or add a stock image.
6. Click Save.

What happens if I don’t add a mobile fallback image?

Generally, if you don't add a mobile fallback image, a background color will display instead. You can set this color in the section’s color theme.

Devices in low-battery or power-saving mode won’t display background videos. If you haven’t added a mobile fallback image, these devices may display a thumbnail from the video and an unresponsive play button.

Remove background videos

You can replace, delete, or disable background videos.

To remove a background video:

1. Open the Pages panel.
2. Click the page with the video you want to remove, then click Edit.
3. Hover over the section and click Edit Section.
4. Click Background, then click:
   • Replace to add another video.
   • The trash can icon to delete the video from the background. This doesn’t delete it from your library.
   • The Image or Art tab to disable the video without removing it. You can add a different background, or leave the background blank. If you click back to Video, your video will display again.
5. After making changes, click Save.

Design tips for background videos

Background videos are a great way to add visual interest to your site, but they shouldn't distract from your other site content. Here are some best practices to help your background video look great. If you're uploading a background video, follow our video requirements.

Keep the video file small

Large video files take longer to load and can cause videos to pause mid-stream, depending on the visitor’s connection. For best results:

• Keep video length under 40 seconds.
• Use videos with 1080p resolution and a bitrate of at least 3 Mbps.
• Use videos with a frame rate of 60 frames per second, especially if the video displays in slow motion.

Use a wide aspect ratio

Section backgrounds resize automatically based on the visitor’s browser window size. To minimize cropping, use videos with a horizontal or landscape aspect ratio, like 16:9.

Choose videos with smooth transitions

When filming videos, limit the motion of the shot or motion of objects in the shot. Less motion often results in smoother-looking background videos.

Avoid using videos with quick cuts, excessive panning, or content that flashes three or more times in a one-second period. Qualities like this can be jarring to visitors and make your videos less accessible.

Contrast with text

To keep your site accessible, ensure any text that overlays the video uses colors that contrast with the video’s colors. For example, if the video is mostly dark, choose a lighter font color for the overlay text, or change the video’s brightness with filters.

Limit number of background videos per page

Add no more than two background videos per page. This way, you'll reduce your page size, leading to faster loading times.

How many background videos can I upload?

Every site includes 30 minutes of video storage for uploaded videos. If you reach this limit, you can get more storage or delete videos from your site to free up storage space.

Why isn’t my YouTube or Vimeo video working?

If you’re embedding a YouTube or Vimeo video with its URL, ensure the URL doesn’t include a timestamp for a specific section of the video, as this prevents it from loading.

For YouTube videos, set them to Unlisted or Public and allow embedding.

For Vimeo videos, set the privacy settings to Public or Hide from Vimeo and allow embedding Anywhere or on Specific domains. If you choose to allow embedding only on specific domains, ensure you add your website’s domain in the text field that appears.

Why are ads displaying over my background video?

Disable overlay ads on YouTube to prevent them from displaying over the background video. Video ads that play before the video, also known as pre-roll ads, won't play on background videos.

Video on background videos in version 7.0

On version 7.0, you can add background videos to cover pages and page banners on some templates.