Video Component

Base Video

The video block wraps a native <video> element and a video__controls bar. The control bar is a flex row that sizes to 100% of the container. Time labels are <span> elements using the video__timestamp class. The scrubber range input uses video__scrubber to fill remaining space. All buttons in the bar use video__control — a bare, unstyled button with only a pressed state.

<div class="video">
  <video src="..." preload="metadata" aria-label="Sample video" />
  <div class="video__controls" role="group" aria-label="Video controls">
    <button class="video__control" type="button" aria-label="Play">
      <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
        <use href="#icon-play-20" />
      </svg>
    </button>
    <span class="video__timestamp"> 0:00 </span>
    <input
      class="video__scrubber"
      type="range"
      min="0"
      max="100"
      value="0"
      step="0.1"
      aria-label="Seek"
    />
    <span class="video__timestamp"> 1:23 </span>
    <button class="video__control" type="button" aria-label="Fullscreen">
      <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
        <use href="#icon-expand-16" />
      </svg>
    </button>
  </div>
</div>

Popover Controls

The control bar may contain buttons that open popovers

<div class="video">
  <video src="..." preload="metadata" aria-label="Sample video" />
  <div class="video__controls" role="group" aria-label="Video controls">
    <button class="video__control" type="button" aria-label="Play">
      <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
        <use href="#icon-play-20" />
      </svg>
    </button>
    <span class="video__timestamp"> 0:00 </span>
    <input
      class="video__scrubber"
      type="range"
      min="0"
      max="100"
      value="0"
      step="0.1"
      aria-label="Seek"
    />
    <span class="video__timestamp"> 1:23 </span>
    <span class="video__popover-container">
      <button class="video__control" type="button" aria-label="Closed captions">
        <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
          <use href="#icon-closed-caption-24" />
        </svg>
      </button>
      <span class="video__popover">
        <!-- menu -->
      </span>
    </span>
    <span class="video__popover-container">
      <button class="video__control" type="button" aria-label="Volume">
        <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
          <use href="#icon-audio-high-24" />
        </svg>
      </button>
      <div class="video__popover">
        <input
          class="video__volume"
          type="range"
          min="0"
          max="100"
          value="80"
          aria-label="Volume"
        />
      </div>
    </span>
    <button class="video__control" type="button" aria-label="Fullscreen">
      <svg class="icon icon--20" width="20" height="20" aria-hidden="true">
        <use href="#icon-expand-16" />
      </svg>
    </button>
  </div>
</div>

Overlays

video__overlay centers content over the video for error and loading states (add video__overlay--transparent for a spinner without a scrim). video__play-overlay is a full-bleed poster play button, and video__nav is a full-bleed overlay link rendered under the control bar.