Video embed

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-video-embed/rh-video-embed.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-video-embed/rh-video-embed.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap 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 Wrap 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 Wrap 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.

Slots 7
Slot Name Description

Place video embed code here; iframe should include a title attribute with the video title
play-button-text

Text for play button; recommended value "Video title (video)"
thumbnail

Optional thumbnail image on top of video embed; should include alt text
consent-message

Text explaining opt-in to cookies is required, e.g. <p>View this video by opting in to “Advertising Cookies.”</p>
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 rh-video-embed.)
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 0
None
Events 3
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 5
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
CSS Custom Properties 0
None
Design Tokens 20
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
Edit this page on GitHub