test

snippets/shx-video-base.liquid

@@ -41,6 +41,14 @@
 
     .shx-video-card-product {
       width: 100%;
+      height: auto;
+      opacity: 0;
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      transform: translate(-50%, -50%);
     }
 
   </style>
@@ -56,8 +64,28 @@
 
       connectedCallback() {
         console.log('connected');
-        console.log(this);
-        this.video = this.querySelector('video'); 
+        this.initVideo();
+        this.observer = new MutationObserver(this.initVideo.bind(this));
+        this.observer.observe(this, { childList: true });
+      }
+
+      initVideo() {
+        this.video = this.querySelector('video');
+        if (!this.video) {
+          console.error('No video element found');
+          return;
+        }
+        console.log("video!", this.video);
+        this.addEventListeners();
+      }
+
+      disconnectedCallback() {
+        if (this.observer) {
+          this.observer.disconnect();
+        }
+      }
+
+      addEventListeners() { 
 
         if(!this.video) {
           console.error('No video element found');
@@ -68,8 +96,6 @@
           return;
         }
 
-        console.log("video",this.video);
-
         // get parrent with class "card-wrapper product-card-wrapper"
         this.productCard = this.video.closest('.product-card-wrapper');
         console.log(this.productCard);