Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Create a Video Banner in Design Center

  • Updated:

This article will show you how to create a video banner, with the option to upload a video from your computer in the Design Center module.

 

Important Note

 

Guidelines/Recommendations for Video Banners

  • Videos should be kept as small as possible to not slow the site down
    • Videos are limited to no more than 10MB
    • Utilize compression as effectively as possible prior to uploading (we recommend using a program such as Clipchamp or HandBrake)
  • The length of the video should be 12 to 30 seconds
  • Videos will be set to Autoplay and will be muted by default; we recommend keeping it this way
  • Files should be MP4 and will play using HTML5 which is supported by most browsers
    • 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 it is high contrast so that it is accessible for visually impaired users

 

Who can use this feature?
System Administrator | Owner | Publisher

 

 

Instructions

  1. Sign in to your site
  2. Navigate to Modules and on the Site Tools tab, select Design Center
    Modules menu with Design Center selected on the Site Tools tab.
  3. Select Theme Manager
    Theme Manager option.
  4. Select Actions in the top-right corner
    Actions button.
  5. Select Copy Theme
    Copy Theme.
  6. Select a Theme to copy
    Select theme option.
  7. Create a Theme Name and select Save as Copy
    Theme name field and Save as Copy button.
  8. Click on the banner you wish to turn into a video banner
    Select banner.
  9. Navigate to the Options tab
    Options tab.
  10. Change the Mode to Video
    Video mode.
  11. Ensure the Video Source is set to Uploaded
    Video Sources is set to Uploaded.
  12. Check the Mute Sound button if you do not want the video to play sound
    Mute sound checkbox
  13. Navigate to the Video tab
    Video tab.
  14. Click Upload Video
    Upload Video button.
  15. Find and Open a video file from your computer
    Select and open video file.
  16. Click Choose Image if you wish to display a different image than the first frame
    Choose Image button.
    Note: If a browser or device does not support video play or your video file, the Poster Image will display in place of the video.
  17. Click the X to close the banner menu 
    X in the top right corner of the menu.
  18. Click Save Changes
    Save Changes button.

Feedback About the Article

Let us know what was helpful or not helpful about the article below.

1 comment

Date Votes
  • John Mark Cagle
    • Edited

    Note: These instructions are not correct for us as by default no banner appears to click on, when the Theme Manager is opened.

    We found that to edit banners, we either need to replace "Themes" in the URL with "Banners", or click the checkbox for "Toggle the Exploded View" next to the Theme name, and (in our case) click in the third dotted-line box from the center of the first box reading "Click the Preview icon..."

    Question: can a video banner be added to the homepage? We can only add video banners to Interior or Simple page Layouts. On the Home layout, we can only edit the default slideshow (referenced in "Edit the Main Homepage Slideshow" support article). There is no banner container to actually edit with the Theme Manager on our "Home" layout.

    0

Please sign in to leave a comment.