# Video facade

> A click-to-load video: a poster with a play button that swaps in the YouTube player on click.

- Block class: `.hs-video`
- CSS: `components/video.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: `components/video.js`. Load it only on a page that has this component.
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: Video facade
- HTML page: https://brand.honorsociety.org/components/video/

## What it is

A poster with a play button; the player loads only on click. Built: A, centred disc ([round 3](/decisions/components-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](/components/link-list/).
- A still image with a caption: use the [Figure](/components/figure/).
- A video route inside a recipient card: use the `--links` form of the [Member card](/components/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">`.

```html
<figure class="hs-video">
  <div class="hs-video__media">
    <a class="hs-video__link" href="https://www.youtube.com/watch?v=VIDEO_ID_11" data-ph-capture-attribute-cta="video" data-ph-capture-attribute-cta-loc="recipients"><img class="hs-video__poster" src="/placeholders/video-poster.svg" width="640" height="360" alt="" loading="lazy"><span class="hs-video__play"></span><span class="hs-visually-hidden">Play video: Elliot Example, Study Abroad Scholarship recipient</span></a>
  </div>
  <figcaption class="hs-video__caption"><span class="hs-video__caption-title">Elliot Example</span>, Study Abroad Scholarship recipient<span class="hs-video__meta">YouTube</span></figcaption>
</figure>
```