hover play video click open lightbox

<!-- Hover play video - Click open lightbox -->
<script>
window.addEventListener('load', () => {
  setTimeout(() => {
    const slides = document.querySelectorAll('.sqs-gallery-design-grid-slide[data-type="video"]');
    
    slides.forEach(slide => {
      const overlay = slide.querySelector('.sqs-video-overlay');
      const icon = slide.querySelector('.sqs-video-icon');
      const wrapper = slide.querySelector('.sqs-video-wrapper');
      const contentWrapper = slide.querySelector('.content-wrapper');
      
      if (!overlay || !icon || !wrapper || !contentWrapper) return;
      
      let iframe = null;
      const dataHtml = wrapper.getAttribute('data-html');
      
      slide.addEventListener('mouseenter', () => {
        icon.style.opacity = '0';
        icon.style.transition = 'opacity .3s ease';
        
        if (!iframe) {
          const temp = document.createElement('div');
          temp.innerHTML = dataHtml;
          const newIframe = temp.querySelector('iframe');
          
          if (newIframe) {
            const src = newIframe.getAttribute('src');
            newIframe.setAttribute('src', src + '&autoplay=1&muted=1&background=1');
            Object.assign(newIframe.style, {
              position: 'absolute',
              top: '0',
              left: '0',
              width: '100%',
              height: '100%',
              pointerEvents: 'none'
            });
            
            wrapper.appendChild(newIframe);
            overlay.style.opacity = '0';
            overlay.style.transition = 'opacity .3s ease';
            iframe = newIframe;
          }
        }
      });
      
      slide.addEventListener('mouseleave', () => {
        icon.style.opacity = '1';
        
        if (iframe) {
          iframe.remove();
          iframe = null;
          overlay.style.opacity = '1';
        }
      });
    });
  }, 1000);
});
</script>

<style>
.sqs-video-icon {
  opacity: 0 !important;
}
</style>