Create a Video Banner through the Layout Tab

This article shows how to create a video banner using the Layout tab on a page. You can upload a video from your computer.

Important Note:

You can also create a Video Banner through the Design Center Module. The Design Center module may cost extra. Contact your Customer Success Manager for more information.

Who can use this feature?

System Administrators

Recommendations for Video Banners

• Keep videos as small as possible so they do not slow down the site:

  • Videos are limited to no more than 10MB

  • Use compression as effectively as possible before uploading. We recommend a program such as Clipchamp or HandBrake

• Video length should be 12 to 30 seconds

• Files should be in MP4 format. They will play using HTML5, which most browsers support

  • Mobile devices and older browsers will display a static Poster Image instead of a video

• If any text is placed on top of the video, make sure that it is high contrast so it is accessible for users with low vision

Instructions

1. Sign in to your site.

   Note:

   Adding "/admin" to your website's URL will take you to a sign-in screen. Note that website preferences may change what this looks like.

2. Navigate to your desired page.

3. Make sure the Live Edit state is toggled to ON:

   

4. In the Live Edit pane, click the Layout tab:

   

5. Click the Edit Banners for this Theme button:

   

   Note:

   If the Edit Banners for this Theme button is not present, contact Support.

6. Click on the logo or banner you want to turn into a video banner:

   

7. On the Banner Options pop-up, click the Options tab:

   

8. Click the Mode dropdown menu and select the Video option:

   

9. Click the Video Source drop-down menu and select the Uploaded option:

   

10. Click the Mute Sound checkbox if you do not want the video to play sound:

    

11. Click on the Video tab:

    

12. Click the Upload Video button:

    

13. Locate the video file you wish to use on your computer and click the Open button:

    

14. Click the Choose Image button if you wish to display a different image than the first frame:

    

    Note:

    If a browser or device does not support video playback or your video file, the Poster Image will display in place of the video.

15. Click the X button to close the window:

    

16. Click the Save Theme button: