Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Video embed

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-video-embedImportingUsagerh-video-embed

Importing

Add rh-video-embed to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-video-embed>
  <img slot="thumbnail" src="video-thumb.jpg" alt="Image description">
  <template>
    <iframe title="Title of video" width="900" height="499" src="https://www.youtube.com/embed/Hc8emNr2igU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
  </template>
  <p slot="caption"><a class="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a></p>
</rh-video-embed>

<script type="module">
  import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
Copy to Clipboard Wrap lines

rh-video-embed

A video embed provides an accessible preview of a YouTube video with a thumbnail and play button. Users must provide an iframe inside a <template> with a title for screen reader users. Should include a thumbnail with alt text. Supports Tab and Enter keyboard focus. Uses aria-hidden on the thumbnail when active. Avoid videos without captions.

Slots 7

Slot Name Summary Description
thumbnail

Optional thumbnail image overlay

Accepts an <img> element displayed on top of the video embed. Authors must include descriptive alt text for screen reader and ARIA users, e.g. "Video title (video thumbnail)". The thumbnail is hidden via aria-hidden when the video is playing.
[default]

Video iframe template

Accepts a <template> element containing an <iframe> for the YouTube embed. The iframe must include a title attribute with the video title for screen reader and ARIA accessibility. The embedded video should have accurate captions per WCAG 1.2.2.
Note: [default] unnamed slots do not have a slot="name" attribute.
autoplay

Internal autoplay iframe slot

Reserved for internal use by rh-video-embed. Authors must not place content in this slot.
consent-message

Custom consent message

Accepts block content (e.g. <p>) explaining that cookie opt-in is required. should be readable by screen readers. Defaults to a built-in message when not provided.
consent-button-text

Consent button label

Accepts inline text for the consent CTA button. Defaults to "Update preferences".
play-button-text

Accessible play button label

Accepts inline text for the play button screen reader and ARIA label. should follow the pattern "Video title (video)" for accessibility. Defaults to the iframe title followed by "(play video)".
caption

Optional video caption

Accepts inline or block content displayed below the video embed, such as a <p> with a link. Links should have accessible text for screen reader users. Styled with secondary text color and small font.

Attributes 2

Attribute DOM Property Description Type Default
require-consent requireConsent

Add to rh-video-embed when a video requires consent for cookies

 
boolean
 
false
consented consented

Boolean flag to flip with JavaScript when cookie consent has been granted or revoked. See the Require Consent demo for reference.

 
boolean
 
false

Methods 1

Method Name Description
firstUpdated()

Events 3

Event Name Description
consent-click

Fires when the user clicks the "Update preferences" consent button. Has no detail payload.
request-play

Fires when the user clicks the play button to request video playback. Has no detail payload.
play

Fires when the embedded iframe is appended and the video is about to begin playback. Has no detail payload.

CSS Shadow Parts 5

Part Name Summary Description
figure

The outer container for rh-video-embed
video

The container for the video, thumbnail, and play button
consent-body

The container for the consent message and consent button
play

The play button on top of the thumbnail
caption

The <figcaption> element for caption content

CSS Custom Properties 0

None

Design Tokens 20

Token Description Copy
--rh-color-border-interactive
--rh-opacity-20

20% opacity
--rh-opacity-80

80% opacity
--rh-opacity-50

50% opacity
--rh-color-text-secondary

Caption text color
--rh-font-size-body-text-sm

Caption font size

14px font size
--rh-line-height-body-text

Caption line height

Line height for body text
--rh-font-family-heading

Consent message font family

Heading font family
--rh-font-size-heading-xs

Consent message font size

h6 heading font size
--rh-line-height-heading

Consent message line height

Line height for headings
--rh-space-lg

Spacing above caption

Space below consent message

16px spacer
--rh-space-xl

Wider consent spacing

Consent body padding

24px spacer
--rh-font-size-heading-sm

Larger consent font size

h5 heading font size
--rh-border-radius-default

Focus border radius

3px border radius; Example: Card
--rh-border-width-lg

Focus outline width

3px border width: Example: Expanded Accordion panel
--rh-border-width-md

Focus outline offset

2px border width: Example: Alert
--rh-color-surface-darkest

Primary surface (dark theme)
--rh-length-2xl

32px length token
--rh-length-4xl

Play button width

64px length token
--rh-color-surface

Play icon color
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify