Video embed
On this page
Style
The video embed element consists of a semitransparent play button with a video thumbnail that overlays the embedded video when it is not playing. There is also an optional slot for a caption that describes the video.
Anatomy
Theme
The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.
Configuration
Caption
The caption can be left-, right-, or center-aligned, depending on how the video is oriented. By default, it is left-aligned.
Space
Space values remain the same at all viewport sizes.
States
Interaction states are visual representations used to communicate the status of an element or pattern.
Hover
The play button’s opacity increases upon hover.
Focus
On focus, the entire video embed element is outlined by a focus ring, and the play button uses the same opacity as the hover state.
Active
The active state is the same as the focus state.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.