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 '@rhds/elements/rh-video-embed/rh-video-embed.js';

.wrap:not(:first-of-type) {
  border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
  margin-block-start: var(--rh-space-2xl, 32px);
  padding-block-start: var(--rh-space-2xl, 32px);
}

.centered {
  justify-content: center;
  text-align: center;
}

.right-aligned {
  justify-content: end;
  text-align: end;
}

<div class="wrap">
  <rh-video-embed class="centered">
    <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>
</div>

<div class="wrap">
  <rh-video-embed class="right-aligned">
    <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>
</div>

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

main {
  display: block;
}

.wrapper {
  max-width: 900px;
  display: block;
}

rh-card::part(header) {
  margin: 0;
}

<div class="wrapper">
  <rh-card>
    <rh-video-embed slot="header">
      <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>
    </rh-video-embed>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Nullam eleifend elit sed est egestas, a sollicitudin mauris
      tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
      felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
    <rh-cta variant="secondary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>
</div>

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

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

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>
</rh-video-embed>

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

const video = document.getElementById('video');
video.addEventListener('consent-click', consentWindow);


function consentWindow() {
  // replace with custom consent logic
  if (confirm('Allow cookies?')) {
    // enables video after consent
    video.consented = true;
  }
}

<rh-video-embed id="video" require-consent="">
  <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>