Video library

A page of an organisation's videos: topic filters along the top, video cards, and pagination.

When to use

When there are more than a handful of videos. Fewer than six can sit on a related page as cards.

Length 2:30

How to report a leak

Explainer · 2 October 2026
Length 4:05

Inside the Kano treatment works

Project · 18 September 2026
Length 12:40

Public hearing on the new tariff

Event · 4 September 2026

Show HTML

<nav aria-label="Video topics">
  <ul class="ag-filters">
    <li><a class="ag-filters__link" href="#video-library" aria-current="page">All</a></li>
    <li><a class="ag-filters__link" href="#video-library">Explainers</a></li>
    <li><a class="ag-filters__link" href="#video-library">Projects</a></li>
    <li><a class="ag-filters__link" href="#video-library">Events</a></li>
  </ul>
</nav>
<ul class="ag-cards">
  <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>
    <h2 class="ag-card__title"><a class="ag-card__link" href="#video-library">How to report a leak</a></h2>
    <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>
    <h2 class="ag-card__title"><a class="ag-card__link" href="#video-library">Inside the Kano treatment works</a></h2>
    <p class="ag-card__text">Project · 18 September 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>12:40</span>
    </div>
    <h2 class="ag-card__title">
      <a class="ag-card__link" href="#video-library">Public hearing on the new tariff</a>
    </h2>
    <p class="ag-card__text">Event · 4 September 2026</p>
  </li>
</ul>
<nav aria-label="Pagination">
  <ul class="ag-pagination ag-mb-0">
    <li><a class="ag-pagination__link" href="#video-library" aria-current="page">1</a></li>
    <li><a class="ag-pagination__link" href="#video-library">2</a></li>
    <li><a class="ag-pagination__link" href="#video-library" rel="next">Next</a></li>
  </ul>
</nav>

How it works

The filters are ag-filters: links to the same page with a topic, such as videos.html?topic=projects, or to a page per topic. The current one has aria-current="page". They work with no script and can be bookmarked and shared.
Each card is a video card linking to the video's own page. Newest first.
Twelve videos a page, then pagination.
No players on this page. A grid of real players would load several megabytes before anyone pressed anything.
The video's own page is the video page template: the player, what it covers, the transcript, related videos.