Video

A still image with a play button, the title and the length. The video player loads only when someone presses it, so nobody spends data on a video they did not choose to watch.

When to use

For explainers, project updates and recorded events: a page for one video, a library of videos, or a video beside the text in a hero.

When not to use

As a background, or set to play by itself. afrigov has no autoplaying video, for reasons of data, speed, motion and contrast. See decision 004. And never as the only place information lives: what the video says is also in its transcript.

Published 2 October 2026. Captions in English and Hausa.

Read the transcript

If you see water running where it should not, report it. Go to the agency's website and choose Report a leak.

Say where it is, and add a photograph if you can. You get a reference number by text message.

Show HTML

<figure class="ag-video ag-mb-0">
  <a
    class="ag-video__poster"
    href="https://www.youtube.com/watch?v=VIDEO_ID"
    data-ag-video="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    data-ag-video-title="How to report a leak"
  >
    <img
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Crect x='9' y='2' width='5' height='5' fill='%231f4e79'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%23869fb5'/%3E%3C/svg%3E"
      alt=""
      width="1280"
      height="720"
      loading="lazy"
    />
    <span class="ag-video__play" aria-hidden="true"></span>
    <span class="ag-video__label"
      >Play video: How to report a leak<span class="ag-video__length">2 min 30 s</span></span
    >
  </a>
  <figcaption class="ag-video__caption">Published 2 October 2026. Captions in English and Hausa.</figcaption>
</figure>
<details class="ag-details ag-mb-0">
  <summary class="ag-details__summary">Read the transcript</summary>
  <div class="ag-details__body">
    <p>
      If you see water running where it should not, report it. Go to the agency's website and choose Report a leak.
    </p>
    <p>Say where it is, and add a photograph if you can. You get a reference number by text message.</p>
  </div>
</details>

The video in the example is a placeholder. Replace VIDEO_ID with your video's ID.

Video cards

For a library or a row of related videos, ag-card--video puts a play mark on the card's picture and the length in its corner. The card links to the video's own page.

Length 2:30

How to report a leak

Explainer · 2 October 2026
Length 4:05

Inside the Kano treatment works

Project · 18 September 2026

Show HTML

<ul class="ag-cards ag-mb-0">
  <li class="ag-card ag-card--video">
    <div class="ag-card__image">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Crect x='9' y='2' width='5' height='5' fill='%231f4e79'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%23869fb5'/%3E%3C/svg%3E"
        alt=""
        width="640"
        height="360"
        loading="lazy"
      />
      <span class="ag-card__duration"><span class="ag-visually-hidden">Length </span>2:30</span>
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#video-cards">How to report a leak</a></h3>
    <p class="ag-card__text">Explainer · 2 October 2026</p>
  </li>
  <li class="ag-card ag-card--video">
    <div class="ag-card__image">
      <img
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23c7d6e3'/%3E%3Crect x='9' y='2' width='5' height='5' fill='%231f4e79'/%3E%3Cpath d='M0 9 L0 6.5 C3 5 5 7 8 5.5 C11 4 13 6.5 16 5.5 L16 9 Z' fill='%23869fb5'/%3E%3C/svg%3E"
        alt=""
        width="640"
        height="360"
        loading="lazy"
      />
      <span class="ag-card__duration"><span class="ag-visually-hidden">Length </span>4:05</span>
    </div>
    <h3 class="ag-card__title"><a class="ag-card__link" href="#video-cards">Inside the Kano treatment works</a></h3>
    <p class="ag-card__text">Project · 18 September 2026</p>
  </li>
</ul>

How it works

The poster is a link to the video on its host, such as YouTube. With the script, pressing it swaps in the player at the same size and starts it. Without the script, the link opens the video on its host.
data-ag-video is the embed address. Use youtube-nocookie.com for YouTube, so no tracking cookie is set until someone presses play. data-ag-video-title names the player for screen readers.
The label says what pressing does, the title and the length. People decide whether to spend the data before they press.
The poster is 16 by 9. Use a frame from the video, compressed, under 100 KB. Its alt is empty, since the label names the video.
In a hero, put the video where the image goes: ag-video in place of the figure in ag-hero--image. See hero.
For a page of videos, see the video library pattern.

Accessibility

Every video has captions, made by a person or checked by one. Automatic captions alone are not enough.
Every video has a transcript on the page, in a details under the player.
If the picture shows something the words do not say, the video needs audio description, or the transcript describes it.
Nothing plays until someone presses play. When the player appears, focus moves to it.