PATTERN OVERVIEW

Display a 10-20 second looping video clip (does not contain audio) as the hero image at the top of a page. Use to set tone or provide personality to a page that cannot be accomplished with a static image. This is an adaptive pattern and loads a second version of the video formatted for mobile devices.

Guidelines

• This pattern should be used on a top tier or a main landing page and should only appear once on a single page.
  
  
• The video should provide a clean backdrop to the headline and supporting subheading so that the copy is readable and legible. 
  • The type and background must maintain a contrast ratio of at least 3:1. to meet Accessibility Guidelines (WCAG) 2.1 AA requirements.
  • The type is added to the video clip via the AEM "Looping Video" component.
  • An optional 10% overlay can be applied via the AEM component to darken the video, helping the type to standout and meet contrast requirements.
  • The heading level can be set to an H1, H2, H3 or body copy.
     
• A static image is uploaded in case the video fails to load.
  
  
• An chevron pointing down appears below the tagline to visually direct users lower on the page. Clicking on the chevron will jump vistitors to the content area below. The chevron can be turned off. 
  
  
• More notes can be found by downloading the overview.
  
  
• Marketers/PMs must work with their creative directors when preparing a looping video clip and get approval from Jon Trettel before using this component.

AEM component: Use the "Looping Video Container" component to build this pattern.

specifications

Heading: 45 characters max (including spaces)

Tagline: 60 characters max (including spaces)

Type alignment: Centered

Video specs: Two banner sizes are available for desktop. Using the small option will take up less vertical space.

• Desktop: 
  • Large: 1920 x 800 px mp4 264 codec*; or
  • Small: 1920 x 577 px mp4 264 codec*
• Mobile: 960 x 400 px mp4 264 codec*

Thumbnail: Supply a PNG file for desktop (Large: 1920 x 800 px or Small: 1920 x 466 px) and mobile (960 x 400 px). This will display if the video fails to load in a timely manner.

* When exporting out of Adobe Media Encoder, leave the bandwidth setting at high bandwidth. The video files will be compressed when uploaded to the DAM.