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="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>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
|
|
--rh-color-surface-darkest
|
|
--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.
