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.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_the_banner_to_turn_into_video.jpg
  9. Navigate to the Options tab
    options.png
  10. Change the Mode to Video
    change_the_mode_to_video.jpg
  11. Change the Video Source to Uploaded
    change_the_video_source_to_uploaded.jpg
  12. Check the Mute Sound button if you do not want the video to play sound
    check_the_mute_button_if_desired.jpg
  13. Navigate to the Video tab
    navigate_to_the_video_tab.jpg
  14. Click Upload Video
    select_upload_video_to_upload_file.jpg
  15. Find and Open a video file from your computer
    select_a_file_and_click_open.jpg
  16. Click Choose Image if you wish to display a different image than the first frame
    select_choose_image_to_choose_a_thumbnail.jpg
    • 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
    click_the_X_to_exit_banner_options.jpg
  18. Click Save Changes
    select_save_changes_to_save_video_banner.jpg



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.