Video embed
Installation
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
| 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 |
| DOM Property | Description | Type | Default |
|---|---|---|---|
requireConsent |
Add to |
|
|
consented |
Boolean flag to flip with JavaScript when cookie consent has been granted or revoked. See the Require Consent demo for reference. |
|
|
None
| 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 |
None
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
