test

snippets/shx-product-desc.liquid

@@ -53,12 +53,13 @@
 
                             this.appendChild(videoWrapperClone);                            
                     
-                            // get video element
-                            let videoElement = videoWrapperClone.querySelector('video');
+                            
                             videoWrapperClone.classList.add('shx-video-for-desc');
 
+                            // get video element
+                            let videoElement = videoWrapperClone.querySelector('video');
                             // move video element out of his parent
-                            videoWrapperClone.appendChild(videoElement);
+                            videoWrapperClone.appendChild(videoElement); 
 
                             
 
@@ -72,15 +73,22 @@
                             videoElement.play();
 
                             if(openAnimation) {
+                                // calculate of videoWrapperClone height
+                                let height = videoWrapperClone.offsetHeight;
+
                                 videoWrapperClone.style.height = '0px';
 
                                 function animate() {
                                     anime({
                                         targets: videoWrapperClone,
-                                        height: '400px',
+                                        height: height,
                                         duration: 500,
                                         easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
+                                        done: function() {
+                                            videoWrapperClone.style.height = 'auto';
+                                        }
                                     });
+
                                 }
 
                                 //animejs fade in

snippets/shx-video-base.liquid

@@ -37,12 +37,16 @@
       margin: 0 auto;
     }
 
+    .shx-video-for-desc video {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+
     .shx-video-card-product {
       width: 100%;
       height: auto;
       opacity: 0;
-
-
     }
 
   </style>