08-08-2025 (2)

To make preview video (Vimeo) appears on hover gallery grid image, from this.

To something like this.

#1. First, find Gallery ID

#2. Next, use this code to Custom CSS

section[data-section-id="677bdc49f0c8fb001e6ef930"] {
    /* fix duplicate video */
  figure.gallery-grid-item iframe:nth-child(3) {
    display: none !important;
}
figure.gallery-grid-item img {
    transition: opacity 0.3s ease;
}
figure.gallery-grid-item iframe {
    opacity: 0;
    transition: opacity 0.3s ease;
}
  figure.gallery-grid-item iframe {
    pointer-events: none;
}
  /* Show video iframe on hover */
  figure.gallery-grid-item:hover iframe {
      opacity: 1 !important;
  }
  .gallery-grid-item-wrapper {
    padding-bottom: 56.25% !important;
}}

#3. Next, use this code to Page Header Injection (or Code Injection > Footer)

<script>
document.addEventListener('DOMContentLoaded', function() {
    const videoMapping = {
        'figure:nth-child(1)': 'https://vimeo.com/1105640154',
        'figure:nth-child(2)': 'https://vimeo.com/1105640086',
        'figure:nth-child(3)': 'https://vimeo.com/1105640136',
    };
    
    function getVimeoId(url) {
        const match = url.match(/vimeo\.com\/(\d+)/);
        return match ? match[1] : null;
    }
    
    Object.keys(videoMapping).forEach(selector => {
        const item = document.querySelector(`section[data-section-id="677bdc49f0c8fb001e6ef930"] .gallery-grid-wrapper ${selector}`);
        const videoUrl = videoMapping[selector];
        
        if (item && videoUrl) {
            const vimeoId = getVimeoId(videoUrl);
            if (!vimeoId) return;
            
            const gridImage = item.querySelector('.gallery-grid-item-wrapper');
            const originalImg = gridImage.querySelector('img');
            
            if (gridImage && originalImg) {
                const iframe = document.createElement('iframe');
                iframe.src = `https://player.vimeo.com/video/${vimeoId}?background=1&autoplay=1&loop=1&muted=1&controls=0`;
                iframe.style.position = 'absolute';
                iframe.style.top = '0';
                iframe.style.left = '0';
                iframe.style.width = '100%';
                iframe.style.height = '100%';
                iframe.style.border = 'none';
                iframe.style.opacity = '0';
                iframe.style.transition = 'opacity 0.3s ease';
                iframe.setAttribute('allow', 'autoplay');
                
                gridImage.style.position = 'relative';
                gridImage.appendChild(iframe);
                
                item.addEventListener('mouseenter', function() {
                    iframe.style.opacity = '1';
                    originalImg.style.opacity = '0';
                });
                
                item.addEventListener('mouseleave', function() {
                    iframe.style.opacity = '0';
                    originalImg.style.opacity = '1';
                });
            }
        }
    });
});
</script>

#4. Remember to update these

figure:nth-child(1) = first image

figure:nth-child(2) = second image

figure:nth-child(3) = third image

You can repeat similar