Video Lightbox: Loop Vimeo

To Loop Vimeo video in Lightbox when using Video Lightbox Plugin, use this code to Code Injection > Footer (under Video Lightbox Plugin code).

<script>
(function() {
    function interceptVimeoIframe() {
        const originalSetAttribute = HTMLIFrameElement.prototype.setAttribute;
        
        HTMLIFrameElement.prototype.setAttribute = function(name, value) {
            if (name === 'src' && value.includes('player.vimeo.com')) {
                if (!value.includes('loop=1')) {
                    const separator = value.includes('?') ? '&' : '?';
                    value = value + separator + 'loop=1';
                }
            }
            return originalSetAttribute.call(this, name, value);
        };
    }
    
    function patchModalContent() {
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === 1 && node.classList && 
                            node.classList.contains('c-video-lightbox__iframe-wrapper')) {
                            
                            const iframe = node.querySelector('iframe');
                            if (iframe && iframe.src.includes('player.vimeo.com')) {
                                const currentSrc = iframe.src;
                                if (!currentSrc.includes('loop=1')) {
                                    const separator = currentSrc.includes('?') ? '&' : '?';
                                    iframe.src = currentSrc + separator + 'loop=1';
                                }
                            }
                        }
                        
                        if (node.nodeType === 1 && node.tagName === 'IFRAME' && 
                            node.src.includes('player.vimeo.com')) {
                            const currentSrc = node.src;
                            if (!currentSrc.includes('loop=1')) {
                                const separator = currentSrc.includes('?') ? '&' : '?';
                                node.src = currentSrc + separator + 'loop=1';
                            }
                        }
                    });
                }
                
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-html') {
                    const target = mutation.target;
                    const dataHtml = target.getAttribute('data-html');
                    if (dataHtml && dataHtml.includes('player.vimeo.com') && !dataHtml.includes('loop=1')) {
                        const updatedHtml = dataHtml.replace(
                            /src="([^"]*player\.vimeo\.com[^"]*)"/, 
                            function(match, url) {
                                const separator = url.includes('?') ? '&' : '?';
                                return 'src="' + url + separator + 'loop=1"';
                            }
                        );
                        target.setAttribute('data-html', updatedHtml);
                    }
                }
            });
        });
        
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['data-html']
        });
    }
    
    function patchExistingLinks() {
        const vimeoLinks = document.querySelectorAll('a[href*="vimeo.com"][data-html]');
        vimeoLinks.forEach(function(link) {
            const dataHtml = link.getAttribute('data-html');
            if (dataHtml && dataHtml.includes('player.vimeo.com') && !dataHtml.includes('loop=1')) {
                const updatedHtml = dataHtml.replace(
                    /src="([^"]*player\.vimeo\.com[^"]*)"/, 
                    function(match, url) {
                        const separator = url.includes('?') ? '&' : '?';
                        return 'src="' + url + separator + 'loop=1"';
                    }
                );
                link.setAttribute('data-html', updatedHtml);
            }
        });
    }
    
    function interceptInnerHTML() {
        const originalInnerHTML = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
        
        Object.defineProperty(Element.prototype, 'innerHTML', {
            set: function(value) {
                if (typeof value === 'string' && 
                    value.includes('player.vimeo.com') && 
                    !value.includes('loop=1')) {
                    
                    value = value.replace(
                        /src="([^"]*player\.vimeo\.com[^"]*)"/, 
                        function(match, url) {
                            const separator = url.includes('?') ? '&' : '?';
                            return 'src="' + url + separator + 'loop=1"';
                        }
                    );
                }
                return originalInnerHTML.set.call(this, value);
            },
            get: originalInnerHTML.get
        });
    }
    
    function initVimeoLoop() {
        interceptVimeoIframe();
        interceptInnerHTML();
        patchModalContent();
        
        setTimeout(patchExistingLinks, 500);
        
        document.addEventListener('click', function(e) {
            if (e.target.closest('a[href*="vimeo.com"]')) {
                setTimeout(patchExistingLinks, 100);
            }
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initVimeoLoop);
    } else {
        initVimeoLoop();
    }
    
    window.VimeoLoopForcer = {
        forceLoop: function() {
            const iframes = document.querySelectorAll('iframe[src*="player.vimeo.com"]');
            iframes.forEach(function(iframe) {
                const currentSrc = iframe.src;
                if (!currentSrc.includes('loop=1')) {
                    const separator = currentSrc.includes('?') ? '&' : '?';
                    iframe.src = currentSrc + separator + 'loop=1';
                }
            });
            patchExistingLinks();
        }
    };
})();
</script>

 

Buy me a coffee