Video embed
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Usage
<rh-video-embed>
<img slot="thumbnail" src="https://fakeimg.pl/900x499/282828/eae0d0" 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
Copied!
Wrap lines
Overflow lines
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.
Slot Name | Description |
---|---|
|
Place video embed code here; iframe should include a |
play-button-text |
Text for play button; recommended value "Video title (video)" |
thumbnail |
Optional thumbnail image on top of video embed; should include |
consent-message |
Text explaining opt-in to cookies is required, e.g. |
consent-button-text |
Text for CTA button to update preferences, e.g. "Update preferences" |
caption |
Optional caption below video embed |
autoplay |
DO NOT USE! (Used by |
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. |
|
|
Event Name | Description |
---|---|
consent-click |
"Update preferences" consent button is clicked |
request-play |
Play button is clicked |
play |
Video is about to be played |
Part Name | 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 |
Token | Copy |
---|---|
--rh-border-radius-default
|
|
--rh-border-width-lg
|
|
--rh-border-width-md
|
|
--rh-color-border-interactive
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-secondary
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-size-heading-sm
|
|
--rh-font-size-heading-xs
|
|
--rh-length-2xl
|
|
--rh-length-4xl
|
|
--rh-line-height-body-text
|
|
--rh-line-height-heading
|
|
--rh-opacity-20
|
|
--rh-opacity-50
|
|
--rh-opacity-80
|
|
--rh-space-lg
|
|
--rh-space-xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.