Video embed

import '@rhds/elements/rh-video-embed/rh-video-embed.js';

<rh-video-embed>
  <img slot="thumbnail" src="video-thumb.jpg" 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>

import { VideoEmbed } from "@rhds/elements/react/rh-video-embed/rh-video-embed.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <VideoEmbed>
    <img slot="thumbnail" src="video-thumb.jpg" alt="Image description" />
    <template />
    <p slot="caption">
      <a className="rh-video-embed-caption-link" href="https://www.redhat.com/">View the infographic</a>
    </p>
  </VideoEmbed>
);