Video facade

What it is

A poster with a play button; the player loads only on click. Built: A, centred disc (round 3). Load video.js; without it the link opens YouTube. Host the poster on our server.

When to use

• Recipient videos on award pages and /scholarships.
• A video on /members, /university-relations or /honorsocietyorg-life, in place of an iframe that loads with the page.
• Two videos in a row: <ul class="hs-video-grid">. Add .hs-video-grid--3 for three from 62rem.

When not to use

• A list of video links with no posters: use the Link list.
• A still image with a caption: use the Figure.
• A video route inside a recipient card: use the --links form of the Member card.

Rules

• Markup: figure.hs-video > div.hs-video__media > a.hs-video__link, with img.hs-video__poster, an empty span.hs-video__play and a .hs-visually-hidden label Play video: <title>. An optional figcaption.hs-video__caption follows.
• Point the link at a YouTube watch, youtu.be, embed or shorts URL. video.js leaves any other URL as a plain link.
• Load video.js on the page. Without it the link opens YouTube, so the page still works.
• hs_theme must load video.js only on pages that contain a video facade. Decided; the Drupal wiring comes with the hs_html_page work.
• Host the poster on our server. An i.ytimg.com poster contacts Google before the click.
• The link carries data-ph-capture-attribute-cta and data-ph-capture-attribute-cta-loc.
• Replace the placeholder ID VIDEO_ID_11 with the real video ID.

Accessibility

• The hidden label names the video. video.js uses it, without “Play video: ”, as the iframe title. The poster takes alt="".
• After the click, focus moves to the player.
• The navy disc with its white 2px ring clears 3:1 on a dark or a light poster. On hover and focus the triangle is navy-deep on gold, 12.4:1.
• Reduced motion: no transition. The player starts only after a click.

Variants

Video facade

Click the poster: the youtube-nocookie player replaces the link and starts. Two in a row: <ul class="hs-video-grid">.