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>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>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.
Theming
This element uses Red Hat design system theming and can be used in themable contexts.
Slots
| Slot Name | Summary | Description |
|---|---|---|
thumbnail
|
Optional thumbnail image overlay |
Accepts an |
[default]
|
Video iframe template |
Accepts a |
autoplay
|
Internal autoplay iframe slot |
Reserved for internal use by |
consent-message
|
Custom consent message |
Accepts block content (e.g. |
Consent button label |
Accepts inline text for the consent CTA button. Defaults to "Update preferences". |
|
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 |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
require-consent
|
requireConsent |
Add to |
|
|
consented
|
consented |
Boolean flag to flip with JavaScript when cookie consent has been granted or revoked. See the Require Consent demo for reference. |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
consent-click
|
Fires when the user clicks
the "Update preferences" consent button. Has no |
request-play
|
Fires when the user clicks the
play button to request video playback. Has no |
play
|
Fires when the embedded iframe is
appended and the video is about to begin playback. Has no |
CSS Shadow Parts
| 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 |
CSS Custom Properties
None
Design Tokens
| 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 Applies a 3px border radius to at least 1 corner of a container. This shall be the default for all containers needing rounded corners. It should be used to soften a container's visual footprint. Recommended for elements with subtle rounded corners like Button, Card, or Dialog. It must be applied to all 4 corners of a container at once. |
|
--rh-border-width-lg
|
Focus outline width Applies a 3px border width to 1 side of a container. It should be used for strong directional emphasis like indicating a current page, expanded, or selected state. Recommended for elements needing heavy visual weight like Accordion, Navigation, or Tabs. It must also be used for the focus indicator border per WCAG. Except for the focus indicator, it should not be applied to all 4 sides at once. |
|
--rh-border-width-md
|
Focus outline offset Applies a 2px border width to at least 1 side of a container. It should be used to add emphasis or visual separation beyond a 1px border. Recommended for elements needing extra thickness like Alert or Progress stepper. It must be used to ensure hover, focus, and active states are discernible by more than color alone per WCAG. Applying to all 4 sides at once is optional. |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-length-2xl
|
Play button vertical center offset 32px length token |
|
--rh-length-4xl
|
Play button width 64px length token |
|
--rh-color-surface
|
Play icon color |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
