Layout


 






Create a Video Banner through the Layout Tab

Who can use this feature?

system_admin.png

 

Overview

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

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 your desired page
  2. Turn on Live Edit
    add_quick_links_to_my_page_live_edit_is_on.jpg
  3. Select the Layout tab
    enable_feature_column_layout.jpg
  4. Select Edit Banners for this Theme
    create_a_video_banner_edit_banners_for_this_theme.jpg
    • Note: If the Edit Banners for this Theme button is not present, please contact Support.
  5. Click on the banner or logo you wish to turn into a video banner
    create_a_video_banner_click_banner.jpg
  6. Navigate to the Options tab
    create_a_video_banner_options.jpg
  7. Change the Mode to Video
    create_a_video_banner_select_video.jpg
  8. Change the Video Source to Uploaded
    create_a_video_banner_select_uploaded.jpg
  9. Check the Mute Sound button if you do not want the video to play sound
    create_a_video_banner_mute_sound.jpg
  10. Navigate to the Video tab
    create_a_video_banner_video_tab.jpg
  11. Click Upload Video
    create_a_video_banner_upload_video.jpg
  12. Find and Open a video file from your computer
    create_a_video_banner_open_video_file.jpg
  13. Click Choose Image if you wish to display a different image than the first frame
    create_a_video_banner_choose_image.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.
  14. Click X
    create_a_video_banner_X_close_options.jpg
  15. Click Save Changes
    create_a_video_banner_save_theme.jpg



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback