Videos
The Video component provides responsive containers for videos to ensure they display correctly across creen sizes.
Examples and Code
Section titled “Examples and Code”
Open Full 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 Guidance
Section titled “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
Section titled “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 |