Hero

Make an impression on your users with full width hero images and video.

Technical Set Up

Many of the templates use full width hero images and video. The hero pattern is automatically added to the page with filler content.

Toggle between image and video using page parameter (also built into the page template)

Copy

Title

Title is required. If the field is blank, the image might not display.

Supporting Copy

Optionally add 100 - 150 words of additional content.

CTA

Optionally add CTAs with the Hero Buttons Snippet.

Background Video

Use hosted video for background videos.

Export Size

Use the following specs to balance page load and video quality of the background video.

Size: 1280 x 720
- Why Simon’s Rock page should be sized differently in order to reduce the page load. The MP4 can be 1280x720, but OGV and WEBM, with inferior compression algorithms and less usage, should be scaled down to 640x360.
Target bit rate: .9Mbps
Maximum bit rate: 1.5Mbps
Don't export audio tracks
Don't export metadata
2 pass VBR

Export Files

Deploy multiple formats to optimize on diverse browsers.

File Types

ogg
webm
mp4

File Name and Structure

Use same filename for all file types
Inside OUCampus, upload to the same directory of the _videos folder
For the Why Simon's Rock page, also include the poster image in the same directory and place in same file folder.

Poster Image

Hero videos need a poster image for use on smaller devices. Size poster image at 1280 x 720

Accessibility

With hero videos, add a description to the video tag.

<video width="300" height="150" controls="controls" poster="/_images/video/homepage-hero-background.jpg"
  aria-label="Whether doing field research or using first-class facilities, you will enjoy hands-on learning and an engaging classes."
>

Tools and programs

Adobe Media Encoder can create mp4 version
Use VideoJS, Miro Video Converter, MPEG Streamclip, Handbrake, or EasyHTML5Video to create additional file types.
On Easy HTML5Video: Section 3: Check MP4, webm, and ogg, size should be same as original, try quality of normal, do not check auto play, controls, loop, or watermark.

Modal Video

Set the CTA Button link to # and the link will open up a video modal window
Limit Video Modal Title to 120 characters
For YouTube video, use 'embed' format link format: //www.youtube.com/embed/bjSzULF9ku0

Background Image

If using a background image instead of a background video.

Large image: 1280 x 400
Main Image: 360x550
Homepage and ;WSR Panel Large Image: 1280x400
Gatekeeper Large Image: 1280x420
Gatekeeper Main Image: 700x350

# Bug - Hero Text

The Hero Image Title can't begin with a roman numeral (0-9).

The hero image is displayed through CSS. The template takes the h1 line. Turns it into a class. Then creates a CSS rule for that class. But that class can't begin with a number.

Won't Work

2 Reasons Titling Can Be Confusing

Will Work

Two Reasons Titling Can Be Confusing

# Hack - Academy Logo

Use the Academy logo for academy themed landing pages on the Gatekeeper template.

On the hero image table, add a table row. You will need to use source code.

<tr class="logo">
  <td class="ou-help" style="width: 15%;">logo</td>
  <td class="logo">academy</td>
</tr>

The hero-image portion of the snippet.xsl file will see this class/value combination and insert the academy adjustments to the template.