Design Center Pro


 






Create a Video Banner Through Design Center

Who can use this feature?

System_Admin.png Slash.png Owner.png Slash.png Publisher.png

 

 

Overview

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

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)
  • Length of video should be 12-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

Instructions

  1. Navigate to Modules > Site Tools > Design Center
    modules_site_tools_design_center_pro.jpg
  2. Select Theme Manager
    create_a_video_banner_theme_manager.jpg
  3. Select Actions in the top-right corner
    create_a_video_banner_actions.jpg
  4. Select Copy Theme
    create_a_video_banner_copy_theme.jpg
  5. Select a theme
    create_a_video_banner_home_theme.jpg
  6. Create a Theme Name
    create_a_video_banner_theme_name.jpg
  7. Click Save As Copy
    create_a_video_banner_save_as_copy.jpg
  8. Click on the banner you wish to turn into a video banner
    select_banner.png
  9. Navigate to the Options tab
    options.png
  10. Change the Mode to Video
    video_mode.png
  11. Change the Video Source to Uploaded
    video_source.png
  12. Check the Mute Sound button if you do not want the video to play sound
    mute_sound.png
  13. Navigate to the Video tab
    video_tab.png
  14. Click Upload Video
    upload_video.png
  15. Find and Open a video file from your computer
    open.png
  16. Click Choose Image if you wish to display a different image than the first frame
    choose_image.png
    • 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 X
    X.png
  18. Click Save Changes
    save_changes.png



I'd Like to Request an Enhancement

0 out of 1 found this helpful

Updated:
Follow

Article Feedback

  • Avatar
    Kate Dornes

    I've been told that this is out dated - size, and where the videos are hosted is not clear.