Video

This pattern is for embedding a YouTube video with an optional text label. The alternate featured media pattern may be used for videos on a full width page layout.

Rules for using videos

  • A title attribute for the <iframe> must be provided to make the video accessible to users of screen reader software. Including the text '(Video)' at the end of the title helps to identify the type of content when read out.
  • For pre-recorded videos a transcript must be provided to make the content of the video accessible.
  • Captions should be included in all videos. Automatically generated captions often need edited and are not as accurate as those written specifically.
  • A label <figcaption> may be included to add context to the video.

More information on video transcripts and captions is described within caption standards.

Options available


Video

This example contains no dialogue so a transcript is not required.

Example
Code


Video with transcript

This example includes a transcript to provide accessible alternative content.

Example
Code


Video with transcript and label

This example shows a video with text label and transcript.

Example
An introduction to the support provided by Student Services.
Code

An introduction to the support provided by Student Services.