Videos

Step 1: Publish the video on YouTube (preferred)

The video player component is currently designed for videos hosted on YouTube.

Step 2: Update the video-metadata.yml file to include the new video

The video-metadata.yml file contains all videos captions, subtitles and descriptions metadata. It is centrally edited in the wai-website-data repository.

Each entry for a video looks like this:

Add an entry for the new video.

• id ❗🌐
  A short unique name that describes the video. Will be used as video identifier.

• name 🌐
  A title that describes the video. Will be used in All WAI Translations Page when video subtitles in other languages are published.

• main-page 🌐
  ref value of the main page displaying the video; preferably a page with most accessibility features. Will be used in All WAI Translations Page.

• path ❗🌐
  From “wai-videos” folder, path to the VTT files for this video.

• lang-folder (optional)
  When present and set to true, means VTT files for a language are located in a subfolder named after the language shortcode. Example: perspective-videos/en rather than directly in perspective-videos/.

• captions❗🌐
  Captions’ language subtag. Usually en.

• descriptions
  List of language subtags of the available descriptions.

• captions-ad
  Captions’ language of the described video (when existing). Usually en.

• descriptions-ad
  List of language subtags of the available descriptions, for the described video (when existing).

The following parameters are not necessary for a new video, but should be added when the video captions are translated in other languages:

• subtitles 🌐
  List of language subtags of the available subtitles.

• subtitles-ad
  List of language subtags of the available subtitles, for the described video (when existing).

Add VTT files in wai-website-data repository

All VTT files are stored in wai-website-data repository, in wai-videos folder.

Inside this folder, VTT files can be organized in subfolders.

VTT filenames must follow the following convention:

• Captions/Subtitles: <id>.<language-subtag>.vtt
• Captions/Subtitles (described video): <id>_ad.<language-subtag>.vtt
• Descriptions: <id>_desc.<language-subtag>.vtt
• Descriptions (described video): <id>_ad_desc.<language-subtag>.vtt

Step 3: Embed the video in a resource

The description on how to embed videos is available on the Video Player Design Component Page.

Translations

Guidance on how to translate videos captions/subtitles/descriptions is available in the Translating Video Subtitles and Descriptions Guide