Video embed

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-video-embed
  1. Usage
  2. rh-video-embed

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-video-embed/rh-video-embed.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-video-embed/rh-video-embed.js": "./elements/rh-video-embed/rh-video-embed.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/lib/context/color/provider.js": "./lib/context/color/provider.js",
      "@rhds/elements/": "./elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

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">Video caption here</p>
</rh-video-embed>

rh-video-embed

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