Hero Video Widget

Hero Video Widget

Last updated 08.08.24

The Hero Video widget is a container for an autoplaying a short looping video clip without audio. 

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 Kentico Media Library 

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

5. In the Hero Video properties pop up, adjust various settings including video source, cover image and optional text and buttons.
6. 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 Type

Select from the following two video sources:

  • Amazon S3
  • Atlas Media Library 
Cover Image - Small
Select a JPG or PNG file.  Upload the image. (Size not more 100kb)
Cover Image - Medium
Select a JPG or PNG file.  Upload the image. (Size not more 100kb)
Cover Image - Large
Select a JPG or PNG file.  Upload the image. (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 TagCheckbox to add the H1 header tag to the Hero Image widget to improve SEO. This is recommended for the Hero Image widget that appears at the top of a web page, not on those images used elsewhere on the page.
Hero TextText entry field for small paragraph text across your Hero Image
Custom DesignCustom CSS Class

• 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 
The URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.
Check the “URL is Internal” checkbox to access the Pages Application or the Media Library Application to select a page in the site or a document.

Hero Video Widget Example

Lorem Ipsum Dolor Sit Amet

Layout A - Text Box Centered