https://www.padeswoodccs.co.uk/themes/custom/hm/__prototype__/components/video-teaser/video-teaser.js?tmj7l0

1((Drupal) => {
2  customElements.define('video-teaser', class extends HTMLElement {
3    /** @type {HTMLVideoElement|null} */
4    $video = this.querySelector('[data-ref="video"]')
5
6    /** @type {HTMLImageElement|null} */
7    $poster = this.querySelector('[data-ref="poster"]')
8
9    /** @type {HTMLButtonElement|null} */
10    $button = this.querySelector('[data-ref="button"]')
11
12    connectedCallback() {
13      this.addEventListener('command', (event) => {
14        // @ts-ignore
15        if (event.command === '--play') {
16          this.$video?.play()
17          this.toggleClasses(true)
18        }
19      })
20      this.$video?.addEventListener('play', this.toggleClasses.bind(this, true))
21      this.$video?.addEventListener('pause', () => {
22        if (this.$video?.seeking)
23          return
24        this.toggleClasses(false)
25      })
26      this.$video?.addEventListener('ended', this.toggleClasses.bind(this, false))
27    }
28
29    toggleClasses(force = false) {
30      [this.$poster, this.$button].forEach((el) => {
31        el?.classList.toggle('opacity-0', force)
32        el?.classList.toggle('pointer-events-none', force)
33        Drupal.announce(force ? Drupal.t('playing video') : Drupal.t('paused video'))
34      })
35      this.$button?.setAttribute('tabindex', !force ? '0' : '-1')
36      this.$video?.setAttribute('tabindex', force ? '0' : '-1')
37    }
38  })
39})(Drupal)