Video

The Video component provides multiple video playback options depending on the requirements and source type.

Supported variants:

VariantDescription
customInline video with custom playback controls
big-buttonInline video with a large overlay play button
nativeOpens a native HTML5 video player inside a dialog
youtubeOpens a YouTube player inside a dialog

Features include:

  • Accessible playback controls
  • Optional transcript support
  • Optional audio description links
  • Fullscreen/lightbox viewing
  • Native HTML5 and YouTube playback support

Installation

Required dependencies

npm install react-player

Inline Videos

Props

PropTypeFunctionRequired
variant'custom' | 'big-button'Defines which layout the video player will have✓
srcstringthe source of the video to be played✓
transcriptstringIf passed, the transcript control will be visible✗
autoplaybooleanDictates if the video should start automatically✗
audioDescriptionstringA link to the audio description for the video. If it is passed, the audio description button will appear within the controls✗

Custom Video

The custom variant renders an inline HTML5 video element with branded controls.

<Video
  variant="custom"
  src="/videos/example.mp4"
  transcript="This is an example transcript."
  audioDescription="/audio-description"
/>

Big Button Video

The big-button variant provides the same functionality as the custom player while adding a large centered overlay play button.

Audio Description
Audio Description
<Video
  variant="big-button"
  src="/videos/example.mp4"
  transcript={data.transcript}
  audioDescription="/audio-description"
/>

Overlay Behaviour

When paused:

  • The large play button is visible.

When playing:

  • The overlay fades out.
  • The overlay becomes visible again when the video container is hovered.
  • Clicking the overlay toggles playback.

Lightbox-only videos

Native Video

The native variant renders a trigger button that opens a native browser video player inside a dialog.

Audio Description

Video transcript

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding.

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding.

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
<Video
  variant="native"
  src="/videos/example.mp4"
  transcript="This is an example transcript."
  audioDescription="/audio-description-url"
/>

Selecting the trigger opens the browser's native video controls inside the fullscreen dialog.

YouTube Video

The youtube variant renders a trigger button and loads a YouTube player using react-player.

Audio Description

Video transcript

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding.

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding.

In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
In this video, we explore the intricacies of our topic. We delve into various aspects, discussing key points and insights that are essential for understanding. Join us as we navigate through the details, ensuring you grasp the main ideas clearly.
<Video
  variant="youtube"
  youtubeId="dQw4w9WgXcQ"
/>

Internally the component creates:

const url = `https://www.youtube.com/watch?v=${youtubeId}`;

and renders it using ReactPlayer.

Accessibility

The component includes:

  • ARIA labels on all control buttons.
  • Keyboard-accessible interactions through react-aria-components.
  • Accessible transcript controls.
  • Support for external audio description resources.
  • Semantic button and link elements throughout.