Poster Play

<div class="l-grid l-col-4 l-sm-col-1"> <!-- this wrapper is for demo purposes only -->
  <tk-poster-play aria-label="play video" poster-image-url="https://placekitten.com/300/250" class="l-flex l-h-center l-v-center">
    <span class="ml-2x t-base t-heavy" slot="play-length">3:32</span>
  </tk-poster-play>
</div>

<div class="l-grid l-col-4 l-sm-col-1"> <!-- this wrapper is for demo purposes only -->
  <tk-poster-play aria-label="play video" poster-image-url="https://placekitten.com/300/250" class="l-flex l-h-center l-v-center" ratio="wide">
    <span class="ml-2x t-base t-heavy" slot="play-length">3:32</span>
  </tk-poster-play>
</div>
<div class="description-block">
  <h3 class="description-block__headline t-base t-heavy mb-2x">Description</h3>
  <p>In some cases, the preview image for a video needs to be wider. This prop provides a 16:9 ratio.</p>

</div>

<!-- for demo purposes only -->

<tk-highlight id="examplePosterPlayOutput" class="l-block"></tk-highlight>

<div class="l-grid l-col-4 l-sm-col-1"> <!-- this wrapper is for demo purposes only -->
  <tk-poster-play
    id="examplePosterPlay"
    aria-label="play video"
    poster-image-url="https://placekitten.com/350/250"
    class="l-flex l-h-center l-v-center"
  >
    <span class="ml-2x t-base t-heavy" slot="play-length">3:32</span>
  </tk-poster-play>
</div>
<div class="description-block">
  <h3 class="description-block__headline t-base t-heavy mb-2x">Description</h3>
  <p>If you need to handle the event of clicking the button <em>inside</em> of <code>tk-poster-play</code> there&rsquo;s a <code>buttonClick</code> event emitted that can be listened to, to handle further action. The code example below is for non-framework use, but illustrates how to make this work.</p>

</div>

<!-- only required for use outside of a framework -->
<script>
  examplePosterPlay.addEventListener('buttonClick', () => {
    examplePosterPlayOutput.innerHTML = `📣 buttonClick emitted`;
  });
</script>

<div class="l-grid l-col-4 l-sm-col-1"> <!-- this wrapper is for demo purposes only -->
  <tk-poster-play aria-label="play video" poster-image-url="https://placekitten.com/350/250" class="l-flex l-h-center l-v-center" compact="true">
    <span class="ml-2x t-base t-heavy" slot="play-length">3:32</span>
  </tk-poster-play>
</div>
<div class="description-block">
  <h3 class="description-block__headline t-base t-heavy mb-2x">Description</h3>
  <p>Use the <code>compact</code> prop when this component is needed to be displayed as small thumbnails.</p>

</div>