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.
   1. 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. 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, shown here
2. Open the Width/Height tab and add a custom width to the Video Element: calc(100% + 100%)
   
3. Ensure the Margin & Padding values are all set to 0px
   
4. If you would like to display content on top of the Video Element, open the Positioning tab and set the Position to Absolute with 0px on all sides with a Z-index of 1
   
5. 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)

The sizing of the Video element should be uniquely optimized for all screen sizes, especially smaller ones like mobile & tablet, to prevent additional spacing from occurring. Follow the steps below to ensure the video background fills the block space as intended in the Mobile & Tablet device views within Splash.

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%).

Please note: 

• File upload limit via RSVP form is 100 MB
• File upload limit via the CMS is 10 MB, but we recommend against it because of load time implications