diff --git a/snippets/shx-product-desc.liquid b/snippets/shx-product-desc.liquid index e77e0a4..f7ce537 100644 --- a/snippets/shx-product-desc.liquid +++ b/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 diff --git a/snippets/shx-video-base.liquid b/snippets/shx-video-base.liquid index dbb6f74..4c871b9 100644 --- a/snippets/shx-video-base.liquid +++ b/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; - - }