Hero Video Full

Component Overview

The Hero Video full is the only approved way to add a video to a hero section on the page.

There are some limitations that you must be aware of and follow in order to use this component:

1. Never upload a video to the Sitecore Media Library. This component requires a video from Vimeo.
2. Do not use a video that requires audio to understand the context of the video as a hero. This component is to be used only for 'beauty' videos, and must not be used in cases where audio is required.
3. You must use a progressive link from a Vimeo Pro account. See notes at the bottom of the page for an example link.
4. Under no circumstances can you make any visual changes to the layout of the component. This component was carefully created to adhere to WCAG 2.1 Accessibility standards, and changes can cause the component to fail certain success criteria.
5. You must add a fallback image in case the video fails to load.

The Hero Video Full only has two fields, and that's to add a photo and video. This component gets its copy from the Page Title and Page Description fields in the parent page.

Note that there is no component specifically called 'Hero Video Full' in Sitecore. To get this component, you need to add the 'Hero Full or Compact' component.

Component Location

Hero → Hero Full or Compact

Component Overview

Supported Templates & Placeholders

Recommended Image Size

1500x1000 @72DPI

Character Limits

Title: 100
Body: 280

How to Use

1. In the Page Content folder, locate and add the 'Hero Full or Compact' component
2. Ensure that your Page Title and Page Description are entered correctly in the parent page
3. Select your fallback image
4. Enter your video by clicking 'Insert External Link' and pasting your progressive URL in the 'URL' field.
   1. You are still required to enter a link title and alt text
   2. A Vimeo Pro progressive link looks like the following:
      1.  https://player.vimeo.com/progressive_redirect/playback/915642129/rendition/1080p/file.mp4?loc=external&signature=00778788319a6b1a07622003096461f9e8327f86e4acf2e502b5afd779d0fcff
5. In the Details pane for the page in which you want to add a Hero Video Full, navigate to the 'Hero' folder and select 'Hero Video Full'
6. Point the Source field to your 'Hero Full or Compact' that you added earlier