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 5mb
    • Utilize compression as effectively as possible prior to upload (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
    Live_Edit_is_On.png
  3. Select the Layout tab
    layout_tab.png
  4. Select Edit Banners for this Theme
    edit_banners_for_this_theme.png
    • 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
    select_banner.png
  6. Navigate to the Options tab
    options.png
  7. Change the Mode to Video
    video_mode.png
  8. Change the Video Source to Uploaded
    video_source.png
  9. Check the Mute Sound button if you do not want the video to play sound
    mute_sound.png
  10. Navigate to the Video tab
    video_tab.png
  11. Click Upload Video
    upload_video.png
  12. Find and Open a video file from your computer
    open.png
  13. 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.
  14. Click X
    X.png
  15. Click Save Changes
    save_changes.png



I'd Like to Request an Enhancement

0 out of 0 found this helpful

Updated:
Follow

Article Feedback