Videos

The Video component provides responsive containers for videos to ensure they display correctly across creen sizes.

Examples and Code

Select example

<div class="video-container-16-9">
  <iframe width="1759" height="989" src="https://www.youtube.com/embed/jOgcaoegiOw" title="How Eugene became the running capital of the world | Hayward Field" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

Usage

Apply the video container classes to video iframe embeds with the aspect ratio matching the aspect ratio of the video. Most common videos use 16:9.

Pause buttons for autoplaying hero videos

When using autoplaying videos in content, the video should always be user pausable for accessibility purposes. A common use case is to use autoplaying videos in the hero spot on websites. To ensure that these videos provide a pause button, make sure it is in a Hero Envelope using the method described on its component page.

Usage Guidance

Wrap iframe videos or video elements with the container div with the relevent video class. The videos are configured to support common aspect ratios, such as 16:9 and 4:3.

Styles

Classname	Effect	Reason to Use
`video-container-16-9`	Constrains to 16:9 Aspect Ratio	Use on 16:9 (Widescreen) videos
`video-container-4-3`	Constrains to 4:3 Aspect Ratio	Use on 4:3 (Fullscreen) videos
`video-container-feature`	Constrains to 1440:540 Aspect Ratio	Use for hero envelope videos that are standard sized
`iframe-container`	Generic responsive block	Use for generic iframes that are not video content

Accessibility Guidance

Autoplaying video content must be able to be paused: Autoplaying content in general is not recommended, but if you are using an autoplaying video, a pause button is required and can be added using the method noted above.