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 for both light and dark color schemes. It can include either a light or a dark play button, depending on the thumbnail image underneath.

The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail. If an image is on a light color palette or if its video thumbnail image uses mostly light colors, use a light theme 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.