Video

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

To share short, focused video content that supports or enhances the page’s main content. When you want to demonstrate a process, explain a concept, or share a message that benefits from visual and audio presentation.

For training, tutorials, or testimonials that need to be embedded directly in context with other content.

Use the Show Transcript property when a video has an accompanying transcript.

When not to use

If the information can be communicated effectively with text or images, reducing potential accessibility barriers. Do not use the transcript property if the video does not have an accompanying transcript.

How to use

Position videos close to related content to provide context. Always include a clear title or caption describing what the video is about and provide transcripts and captions for all videos to support accessibility and SEO. Transcript text must be accurate, accessible, and easy to read, ensuring it serves as an effective alternative or complement to video content.

Behaviours


As a default [View transcript ] is displayed below the caption with a downwards chevron.
Transcript text is not displayed by default

[View transcript] is clickable. Clicking on this reveals the text transcript and replaces [View transcript] with [Hide Transcript]

[Hide transcript] is clickable. Clicking on this obscures the text transcript and reverts to the default state..

Developer Guidance

Best practices

• Videos should not autoplay.
• Include play, pause, mute, volume, and fullscreen controls that are fully operable via keyboard and screen readers.
• Maintain a responsive layout so the video scales properly on different screen sizes and orientations.
• Preserve user preferences.
• Ensure that focus order around the video player is logical and predictable.

Content Editor Guidance

Best practices

Use the following format for transcript text:

1. Scene descriptions

• Format: In Brackets and bold
• Purpose: To describe what the viewer would see in the video. Write these in a brief and neutral tone to set the scene.
• Example: [Opening Scene: Inspirational music begins. The screen fades in with slow-motion footage of volunteers...]

1. Voice over lines 

• Format: Written like a script, using italics for emphasis where needed, but plain and readable otherwise.
• Example:
[Narrator]:
“At the British Red Cross, we believe in the power of kindness.

1. On-Screen Text Annotations

• Format: In brackets and bold, clearly labeled and relevant to the scene.
• Purpose:
To ensure that the written transcript provides a complete and inclusive representation of the video, capturing both spoken content and visual elements like on-screen text.
• Example:
[On-screen text: “Maya’s Story”].

Accessibility

A video component must be fully and understandable for all users. Provide captions, transcripts, and audio descriptions to ensure accessibility for users with hearing or visual impairments. Controls should be keyboard-accessible and autoplay should be avoided unless muted and user-initiated.

WCAG Success Criteria

• 1.1.1 Non-text Content (Level A)
  Provide a transcript
• 1.2.2 Captions (Prerecorded) (Level A)
  Include captions for all prerecorded videos so users who are deaf or hard of hearing can follow along.
• 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
  Provide audio descriptions or a transcript for videos with important visual information not covered by the audio track.
• 1.4.10 Reflow (Level AA)
  Video players must resize and reflow responsively without horizontal scrolling.
• 1.4.12 Text Spacing (Level AA)
  Ensure captions, transcript links, and any surrounding text remain readable with custom text spacing applied.
• 2.1.1 Keyboard (Level A)
  All player functions (play, pause, volume, scrub, fullscreen) must be operable via keyboard alone.
• 2.1.2 No Keyboard Trap (Level A)
  Users must be able to tab into and out of the video component freely without losing focus.