hover play video

<script>
window.addEventListener('load', () => {
  setTimeout(() => {
    const videoSlides = document.querySelectorAll('.sqs-gallery-design-grid-slide[data-type="video"]');

    videoSlides.forEach((slide) => {
      const overlay = slide.querySelector('.sqs-video-overlay');
      const icon = slide.querySelector('.sqs-video-icon');
      const videoWrapper = slide.querySelector('.sqs-video-wrapper');
      const contentWrapper = slide.querySelector('.content-wrapper');
      
      if (!overlay || !icon || !videoWrapper || !contentWrapper) return;
      
      let iframe = null;
      let isHovering = false;
      const videoData = videoWrapper.getAttribute('data-html');
      
      contentWrapper.addEventListener('click', (e) => {
        if (isHovering && iframe) {
          e.preventDefault();
          e.stopPropagation();
        }
      }, true);
      
      slide.addEventListener('mouseenter', () => {
        isHovering = true;
        icon.style.opacity = '0';
        icon.style.transition = 'opacity 0.3s ease';
        
        if (!iframe) {
          const tempDiv = document.createElement('div');
          tempDiv.innerHTML = videoData;
          iframe = tempDiv.querySelector('iframe');
          
          if (iframe) {
            const currentSrc = iframe.getAttribute('src');
            iframe.setAttribute('src', currentSrc + '&autoplay=1&muted=1&background=1');
            iframe.style.position = 'absolute';
            iframe.style.top = '0';
            iframe.style.left = '0';
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            
            videoWrapper.appendChild(iframe);
            overlay.style.opacity = '0';
            overlay.style.transition = 'opacity 0.3s ease';
          }
        }
      });
      
      slide.addEventListener('mouseleave', () => {
        isHovering = false;
        icon.style.opacity = '1';
        
        if (iframe) {
          iframe.remove();
          iframe = null;
          overlay.style.opacity = '1';
        }
      });
    });
  }, 1000);
});
</script>
<style>
.sqs-video-icon {
    opacity: 0 !important;
}
</style>