How do I set a GIF as the Background of a Block in Splash?

Making your header image a GIF is super simple! Just upload your GIF as if you were uploading any other type of image, and it’ll work like a charm.

How do I set a Video Element as the Background of a Block in Splash?

Follow the steps below to set a custom video as the background of any block in Splash.

Getting Started

Host Your Video on Vimeo

1. Head to vimeo.com.
2. Create any one of the paid accounts. (Vimeo does offer a basic free account for getting started. However, in order for this parameter to work the account hosting the video needs to be a Plus, Pro, Business, or Premium).
3. Upload your video to Vimeo.
4. Copy the URL to paste in the Video Element. You don't need the full embed code, just the standard URL.

Pro Tip: The video will automatically loop and play in the background, so here are some best practices when creating your video outside of Splash to ensure it’s optimized to adapt to those settings:

1. 1. Start and stop with hard cuts, don't fade in/fade out the end of your video.
   2. Try not to use titles or text within the video.
   3. Remove all audio - it's great to do this in the edit as well to reduce load time and help to improve SEO.

Add Your Video as the Background of a Block Within Your Splash Page

1. Add a Video Element within the desired Block and drag it to sit on top of all other content within the Block.

2. Copy the Vimeo URL and click the Add Embed button to paste the URL field within the Video Element.

3. To remove the Vimeo controls shown in the screenshot above, add ?background=1 to the end of the URL.

4. Preview and click Save.

Resize the Video Element to Fill the Height of the Block

Resizing Video Elements can present challenges since the ratio must be maintained and it cannot be forced to fill a space the same way imagery can. For this reason, we recommend using full-width blocks that allow the Video Element to “stretch” across the entire width of the page to help prevent any unwanted negative space that may appear below the Video Element.

Following the steps below will allow you to ensure the Video Element fills the entire space of the Block.

1. Add a Video Element from the Elements Library to set up the structure of the block so that the Video Element sits above all other containers and elements within the block.

2. Open the Width/Height tab and add a custom width of calc(100% + 20%) to the Video Element. Depending on the amount of content in the Block, the "20%" value may need to be increased or decreased in order to best fill the Block. If the height of the Block is very tall, experiment with 100% increments, like calc(100% + 100%), calc(100% + 200%), etc.

3. Add a Min and Max Height of 100%.

4. Ensure the Margin and Padding values are all set to 0px.

5. In the Positioning tab, set the Z-index to 1 and both Translate-x and Translate-y to -50. This will ensure that the Video Element appears in the background and is perfectly centered within the Block. You may need to Save and refresh for the Video Element to readjust within the Block.

6. To display text or imagery (Logo, Event Title, Event Description, Date, Venue, Button, etc.) on top of the video background wrap the content in a Container and make sure the Z-index is higher than 1.

Optimize the Video For Smaller Devices (Mobile & Tablet)

View Tablet and Mobile views to adjust the custom widths accordingly. Tablet usually requires a width that is approximately double the width of Desktop, and Mobile usually requires a width that is about double that of Tablet. For example, if the custom width of Desktop is calc(100% + 100%), Tablet may be calc(100% + 200%), and Mobile may be calc(100% + 400%). Keep in mind the second % value may vary based on the height of the Block where it is being added as the background.

1. In Desktop view, open the Video Background element & then open the Width/Height tab.
2. Switch to Tablet view & increase the overall width from calc(100% + 100%) to calc(100% + 200%).
3. Switch to Mobile view & increase the overall width from calc(100% + 200%) to calc(100% + 400%).

Pro Tip: It’s always a best practice to view the Splash page on an actual device since there are so many screen sizes out there! Slight adjustments may be needed depending on your unique video ratio. If that’s the case, you can test adjusting the second percentage value in the custom “calc equation” (calc(100% + X%).