Autoplay a product video on product hover on collection page & product page.

Store Design
23

the updated version here [https://github.com/peterbrunton/shopify-gists/blob/main/product-card-rollover-video]

plays on mouseenter and pauses on mouseleave

class RolloverVideo extends HTMLElement {
  connectedCallback() {

    this.video = this.querySelector('video');

    if (this.video) {
      this.video.muted = true;

      const cardWrapper = this.closest('.card-wrapper');

      cardWrapper.addEventListener('mouseenter', () => {
        if (this.video.paused) {
          this.video.play();
        }
      });

      cardWrapper.addEventListener('mouseleave', () => {
        this.video.pause();
      });
    }
  }
}

customElements.define('rollover-video', RolloverVideo);