Skip to main content
Design System

Video and Audio Content

Using videos or audio may engage your audience, but these should be used with caution.

Videos

Videos should serve a purpose. Not every page needs a video, and it shouldn't be the only way you provide information.

Whether you host a video or embed one from another source, consider who your audience is, why the video is used, and make sure everyone can access the content.

Hosted

A hosted video means the platform you are using allows you to upload and store your video.

Embedded

An embedded video lets you take a video from another source and put it on your website. Once the video gets embedded, a video player automatically gets added so people can play the video from your site.

Embedding a video requires an embed code. The code determines the size of the video player and provides a URL for the video.

Example:  A YouTube Embed Video code may look like this "<iframe width="560" height="315" src="https://www.youtube.com/embed/0hHl35nbyiM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

After you embed a video, check to make sure the video player is mobile responsive and accessible.

See also:  iframe Embed Pattern

Accessibility Considerations for Videos

Videos should be used with careful consideration to make sure everyone can access the content.

  • Avoid auto-playing your video
  • Ensure the video player is accessible according to the  WCAG 2.0.

Video-only

For videos presenting visual-only content (e.g. videos with no sound or just music playing), provide a transcript or an audio description describing what is happening on the video. A link to this transcript or audio description should be located or linked adjacent to the original video.

Videos with Audio

For videos with both visual and audio components, provide accurate captions. An audio description may be needed for videos with large amounts of visual-only content that is not described in the dialogue.

Learn more about incorporating accessibility into your videos. View  Video Accessibility.

Audio Files

Audio files can include music, podcasts, and other media that is presented only through sound.

Including audio can add engagement to your content. However, if you use too much audio or your audio doesn't serve a purpose, it can be distracting.

Accessibility Considerations for Audio Files

For those who may not be able to hear or have difficulty processing sound, provide a transcript adjacent to the original media.

  • Avoid auto-playing audio files on your web page
  • If the audio file must auto-play, you must have a method to pause or stop the audio.

Learn more about accessible audio files. View  Audio Accessibility.