(Squarespace) How to change Portfolio image to Video on Click

[tuanphan]

To change Portfolio Image to Video on Click, like this

or this

The code works with Portfolio Grid Simple or Portfolio Grid Overlay only

#1. First you need a page with name: Portfolio Lightbox – URL: /portfolio-lightbox
You can also use this free Portfolio tool so you can achieve video popup easier without using complex code.

#2. Add some Video Blocks to this page then find Video Block ID

#3. Edit Portfolio item SEO Description, enter this format

#wm-popup=/portfolio-lightbox#block-yui_3_17_2_1_1748352921439_12483

or this.

#wm-popup=/portfolio-lightbox#block-50482f4d32123c090e62

#4. Install Popup Plugin

#5. Use this extra code to Code Injection > Footer, under Plugin code (or Portfolio Page Header Injection)

<script>
  const PORTFOLIO_SELECTOR = '.grid-item[href*="/project/"]';
function initPortfolioPopup() {
    const portfolioItems = document.querySelectorAll(PORTFOLIO_SELECTOR);
    
    portfolioItems.forEach(async (item) => {
        const originalHref = item.getAttribute('href');
        
        try {
            const response = await fetch(originalHref + '?format=json-pretty');
            const data = await response.json();
            
            const seoDescription = data.item?.seoData?.seoDescription;
            
            if (seoDescription && seoDescription.startsWith('#wm-popup=')) {
                item.setAttribute('href', seoDescription);
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                });
                
                console.log(`Updated: ${originalHref} -> ${seoDescription}`);
            }
            
        } catch (error) {
            console.error(`Error fetching data for ${originalHref}:`, error);
        }
    });
}
function waitForElements() {
    if (document.querySelectorAll(PORTFOLIO_SELECTOR).length > 0) {
        initPortfolioPopup();
    } else {
        setTimeout(waitForElements, 100);
    }
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', waitForElements);
} else {
    waitForElements();
}
</script>

#6. Remember to update Portfolio Page URL