Video embed

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.

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.

The caption can be left-, right-, or center-aligned, depending on how the video is oriented. By default, it is left-aligned.

Space values remain the same at all viewport sizes.

Interaction states are visual representations used to communicate the status of an element or pattern.

The play button’s opacity increases upon hover.

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.

The active state is the same as the focus state.