This component is a button that provides a preview image for videos.
Deprecated Component
This component is deprecated and will not be audited or maintained moving forward.
We recommend exploring alternative solutions in Mosaic, where you can find supported components and updated guidance.
If no suitable alternative exists or you need support defining the right approach, please contact the Design System team by submitting a request through our form.
<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>play-length slotposter-play util class. It has been replaced by this component and will be deprecated.Receives :focus
In some cases, the preview image for a video needs to be wider. This prop provides a 16:9 ratio.
<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>If you need to handle the event of clicking the button inside of tk-poster-play there’s a buttonClick 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.
<!-- 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’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>Use the compact prop when this component is needed to be displayed as small thumbnails.
<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>