Add a video background

Overview

Add an eye-catching video background to your site! You can do this in two ways: You can add a video background by linking to an existing Youtube or Vimeo video or you can add an animated background by adding a GIF image.

Adding a Video Background

If you're planning to use a long sequence or scene as a background, it's much better to use a video background over a GIF background due to size, speed and quality - It will load much faster than a 5 second GIF and looks much more polished.

At this time, it is only possible to add a video background to a row.

Steps

1. First, get the Youtube/Vimeo URL you wish to use as a video background

2. Open the editor

3. Find the row that you want to add this video background to, then click the row and click Background

4. Click the Design tab. Look for Background Video, then click Choose

5.Enter the Youtube/Vimeo URL, then click Update

6. Done! You now have a neat looking video background on your site.

You can also customize the opacity to show more of the background image or even the background color.

Troubleshooting & FAQ (Video Background)

Why should I choose video background over a GIF background?

You should use a Video background if the dimensions of the element is anywhere larger than 300px by 300px and doesn't require being high resolution.

Why isn't my video loading?

The video background widget depends on it's availability. It will not load if;

- The video is down on Youtube/Vimeo

- The sharing settings are set to private

- The content is removed

- The video is not allowed to be shown in your region

How do I get my video to autoplay?

Video backgrounds autoplay automatically.

Can I have a video background over a background image/color?

Yes. You can toggle the opacity of the video background to show more of the background image/color in the Design menu of that row.

Is there a size limit?

There is no size limit for video backgrounds, although it's recommended to use shorter clips in order to reduce loading time.

Can I use multiple video backgrounds on a page?

Yes, however it isn't recommended as using too many videos at once may even crash a users browser depending on their computer/systems resources.

Will video backgrounds display on mobile?

Yes, they display on all devices.

Animated background using GIF

Choose the row you'd like to add the background to, open the row menu and select Background.

Next to the image, click change

Click Upload New Image

Click choose file and select a GIF to upload

Select the GIF from the list of uploaded images and click done.

Your site will now have an animated row background!

Troubleshooting, tips and tricks (GIF Background)

My GIF isn't loading!

In general, GIF's can take some time to load and may appear frame by frame - When it is finished loading, it will continue to loop at it's optimal speed.

No, it's really not loading!

In that case, make sure that the GIF is 1). not corrupted and 2). properly formatted. Try drag and dropping the GIF file into your browser to see if it plays in the browser.

Why should I choose a GIF over video?

You should use a Video background if the dimensions of the element is anywhere larger than 300px by 300px and doesn't require being high resolution. Otherwise, for the most part, it's much more optimal to choose a video background.