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 is a graphical preview of a video overlayed with a play button. When clicked, the embedded YouTube video will begin playing.
Slots
| Slot Name | Summary | Description |
|---|---|---|
thumbnail
|
Optional thumbnail image on top of video embed; should include |
|
[default]
|
Place video embed code here; iframe should include a |
|
autoplay
|
DO NOT USE! (Used by |
|
consent-message
|
Text explaining opt-in to cookies is required, e.g. |
|
|
Text for CTA button to update preferences, e.g. "Update preferences" |
||
|
Text for play button; recommended value "Video title (video)" |
||
caption
|
Optional caption below video embed |
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
| Method Name | Description |
|---|---|
firstUpdated()
|
Events
| Event Name | Description |
|---|---|
consent-click
|
"Update preferences" consent button is clicked |
request-play
|
Play button is clicked |
play
|
Video is about to be played |
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 container for the caption |
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
|
|
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-font-family-heading
|
Heading font family |
|
--rh-font-size-heading-xs
|
h6 heading font size |
|
--rh-line-height-heading
|
Line height for headings |
|
--rh-space-lg
|
16px spacer |
|
--rh-space-xl
|
24px spacer |
|
--rh-font-size-heading-sm
|
h5 heading font size |
|
--rh-border-radius-default
|
3px border radius; Example: Card |
|
--rh-border-width-lg
|
3px border width: Example: Expanded Accordion panel |
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-length-2xl
|
32px length token |
|
--rh-length-4xl
|
64px length token |
|
--rh-color-surface
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
