Hero Video Widget

Hero Video Widget

Last updated 02.14.25

The Hero Video widget is a container for an autoplaying a short looping video clip without audio plus the option to serve a longer form video on click. The looping video only option may feature a headline, hero text and up to two buttons.

Recommended Short Looping Video Specifications 

  • MP4 format 
  • 100MB or less in file size 
  • Maximum 10 seconds 
  • 1920 pixels wide 
  • Height may vary 
  • This file is hosted by the Media Library, YouTube or Vimeo
Optional Long Video
  • This file is hosted by the Media Library, YouTube or Vimeo
  • Opens in popup window at standard video proportions 

Add Hero Video to the page

  1. Select where on the page you would like the widget to appear. 
  2. Click on the blue plus add widget icon   
  3. Select the Hero Video widget from the widget pop up 
  4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Hero Video Properties

  1. In the Hero Video properties pop up, adjust various settings including short video source, optional long video source, cover image and optional text and buttons. Note that adding a long video popup will suppress any text or buttons to allow for a clickable popup viewer.
  2. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Hero Video Widget 

Hover over the Hero Video widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Hero Video Widget 

Hover over the Hero Video widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Hero Video Widget Properties

PROPERTYDESCRIPTION
Loop Video TypeSelect from the following video sources:
  • Vimeo
  • Media Library 
  • YouTube
Video file size should not be greater than 100MB
Loop Video SourcePaste video URL in text entry field
Long Video Type (optional)Select from the following video sources:
  • YouTube
  • Vimeo
  • Media Library
  • None
Long Video SourceCopy and paste below information for video source:
  • Media Library: provide full file path of video hosted in Media Library
  • YouTube video ID only
  • Vimeo video ID only

You can find a video's ID by clicking the Share button under the video, and then looking for the YouTube URL in the Share section. The video ID is the part of the URL after the last slash.

Note choosing a long video popup will suppress any headline text, hero text, or buttons.

Cover ImageThis static graphic will be a placeholder in case of any issue that slows the download of the video. An option would be to select a frame from the video to save as a graphic. Select or create a JPG or PNG file.  Upload the image.

Small
Select or create an image at 640 x 360 px. (Size not more 100kb)

Medium
Select or create an image at 1024 x 576 px. (Size not more 100kb)

Large
Select or create an image at 1920 x 1080 px. (Size not more 100kb)
Header TextText entry field for a limited large headline. This will give you big bold text across your Hero Image.
Enable H1 Header TagCheckbox to add the H1 Header Tag to the widget to improve SEO. Each web page should only contain one H1 Header Tag. Please ensure no other H1 is present on this page when checking this box.
Hero TextText entry field for small paragraph text across your Hero Image. A maximum of 125 characters is recommended for best performance.
Custom DesignCustom CSS Class – use this setting to add text and buttons floating over the video.
Layout A – Text Box Centered (default)
Button Properties: Number of ButtonsThe widget can feature none, one or two buttons by selecting a number from the menu. If the user selects 0 no buttons will display.  Anything other than 0 the Button and the below properties will display.
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
Default - a rectangular shape with a solid-color fill
Round - a pill shape with a solid-color fill
Radius - a rectangle with slightly rounded corners with a solid-color fill
Hollow - a rectangular outline shape with a transparent fill
Expanded - an extra-wide rectangular shape with a solid-color fill
Disabled - a rectangular shape faded back to denote that it is disabled
Clear - a transparent button with only text visible
[Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
Default
Primary Color
Primary Color – Light
Primary Color – Dark
Secondary Color
Secondary Color – Light
Secondary Color – Dark
Gradient
White
Light Gray
Medium Gray
Dark Gray
Black 
[Button] Target URL Select Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.

Hero Video Widget Example

Popup

Looping video with long form popup:

No Popup

Looping video only (no long form video popup) with headline, hero text and two buttons

Lorem Ipsum Dolor Sit Amet

Layout A - Text Box Centered