Video embed

OverviewStyleGuidelinesCodeAccessibilityDemos

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

Anatomy of a video component with numbered annotations.
  1. Thumbnail
  2. Play button
  3. Caption

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.

Light theme video with the Red Hat logo and a play button on a light gray background Dark theme video with the Red Hat logo and a play button on a black background

Configuration

Caption

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

Video with caption, below, left aligned Video with caption, below, center aligned Video with caption, below, right aligned

Space

Space values remain the same at all viewport sizes.

Diagram of spacing for video

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.

Light theme video on a gray background with a darker play button on hover Dark theme video on a black background with a lighter play button on 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.

Light theme video with a focus ring outlining the video and a darker play button Dark theme video with a focus ring outlining the video and a lighter play button

Active

The active state is the same as the focus state.

Light theme video with a focus ring outlining the video and a darker play button Dark theme video with a focus ring outlining the video and a lighter play button