DCJ Digital Design System

Video lightbox

The video lightbox offers an accessible way for users to interact with video content hosted on YouTube. It provides easy and accessible control over the video content. This component eliminates the need to use embedded video iframes. 

Preview

A screenshot of a video lightbox component is presented in a card style with red labels to describe its features.
Labels: 01 video thumbnail, 02 video title, 03 video summary (optional)
A screenshot of a video lightbox component is presented in a full window with red labels to describe its features.
Labels: 04 video link (iFrame), 05 button, 06 video transcript

Customisation

  • By default the pop-up box includes video playback, title, summary and transcription. There is an option to include a call-to-action button.  
  • You can choose to add one video to a page, or two side-by-side, or three in a row. 

Accessibility features

  • Allows keyboard users to navigate the component via keyboard 
  • Allow keyboard users to close the dialog easily via the escape keyboard button
  • ARIA label button on click 

DCJ authoring guidelines

Supported platform

The video lightbox only supports iFrames from YouTube and Vimeo. Other platforms can be evaluated by the Digital Experience Unit based on business requirements. 

Closed captions (provided by business area)

Closed captions (sometimes called subtitles) are the best way to make videos accessible for people who are deaf or hard of hearing. They are a written version of the words that are spoken on video. They are also helpful to those who are not fluent in the language being spoken, in a noisy environment, or multitasking.

Refer to WCAG 2.2 guide to captions

Transcript (required)

Video content requires a text alternative that describes all meaningful information conveyed visually or aurally. This is so that anyone who cannot interpret content from a video are able to read a descriptive text transcript instead. Include all spoken words, descriptions of meaningful sounds and meaningful actions within the video.

Refer to WCAG 2.2 guide to audio descriptions

Limits

  • Video title: maximum 40 characters
  • Video summary: maximum 150 characters
  • Video transcript: no limit
  • Button text: maximum 30 characters.

Page type

A video lightbox can be used on any page type:

  • content pages
  • landing pages
  • campaign pages
  • homepage.
Last updated:

11 Jul 2024