test

snippets/shx-video-base.liquid

@@ -31,4 +31,56 @@
 
   {% endstyle %}
 
+  <script type="text/javascript">
+
+    // create Class for video in product card
+    class ShxVideo {
+      constructor(video) {
+        this.video = video;
+        this.videoWrapper = video.closest('.shx-video__wrapper');
+        //this.videoWrapper.addEventListener('click', this.togglePlay.bind(this));
+
+        // get parrent with class "card-wrapper product-card-wrapper"
+        this.productCard = video.closest('.product-card-wrapper');
+
+        //hover effect
+        this.productCard.addEventListener('mouseenter', this.hoverEffect.bind(this));
+        this.productCard.addEventListener('mouseleave', this.hoverEffect.bind(this));
+
+        // play video on hover
+        this.productCard.addEventListener('mouseenter', this.playVideo.bind(this));
+        this.productCard.addEventListener('mouseleave', this.pauseVideo.bind(this));
+      }
+
+      hoverEffect() {
+        this.productCard.classList.toggle('hover-effect');
+      }
+
+      playVideo() {
+        this.video.play();
+      }
+
+      pauseVideo() {
+        this.video.pause();
+      }
+
+      
+
+      togglePlay() {
+        if (this.video.paused) {
+          this.video.play();
+        } else {
+          this.video.pause();
+        }
+      }
+    }
+
+    // dom ready
+    document.addEventListener('DOMContentLoaded', function() {
+      const videos = document.querySelectorAll('.shx-video-card-product');
+      videos.forEach(video => new ShxVideo(video));
+    });
+
+  </script>
+
 {% endif %}

snippets/shx-video.liquid

@@ -13,6 +13,6 @@
 
 {% elsif videoType == "card_product" %}
 
-  {%- echo media | media_tag: image_size: "2048x", autoplay: false, loop: true, controls: false, preload: "none" -%}
+  {%- echo media | media_tag: image_size: "2048x", autoplay: false, loop: true, controls: false, preload: "none", class: "shx-video-card-product" -%}
 
 {% endif %}