(Squarespace) How to change Portfolio image to Vimeo video

[tuanphan]

To change Portfolio image to Vimeo video, you can do these.

#1. First, find Portfolio item url.

In my example, we will have:

• /project/university-of-warsaw

• /project/university-of-cambridge

• /project/university-of-oxford

• /project/harvard-university

#2. Open Vimeo URL > Click Share icon

Next, click Embed > Copy Embed Code

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

You can also use this Portfolio Preview Vimeo Plugin (affiliate link), so you can do this feature without using complex code.

<script>
document.addEventListener('DOMContentLoaded', function() {
    const videoMappings = {
        '/project/university-of-warsaw': '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/222842052?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Khoảnh khắc kỳ diệu - SAY NẮNG - Phim hoạt hình ► Phim hoạt hình hay nhất 2017"></iframe></div>',
        '/project/university-of-cambridge': '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/438467923?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Phim hoạt hình Cây Táo Thần"></iframe></div>',
        '/project/university-of-oxford': '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/71222269?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Taylor Swift &quot;The Red Tour&quot;"></iframe></div>',
        '/project/harvard-university': '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/53812885?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="8 Hours Taylor Swift"></iframe></div>'
    };

    function createVideoElement(htmlContent) {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = htmlContent;
        const videoContainer = tempDiv.firstElementChild;
        const iframe = videoContainer.querySelector('iframe');
        iframe.src = iframe.src + '&background=1&autoplay=1&loop=1&muted=1&controls=0';
        iframe.style.opacity = '0';
        iframe.style.transition = 'opacity 0.3s ease';
        iframe.style.pointerEvents = 'none';
        return videoContainer;
    }

    document.querySelectorAll('.grid-item').forEach(item => {
        const href = item.getAttribute('href');
        if (href && videoMappings[href]) {
            const gridImage = item.querySelector('.grid-image-inner-wrapper');
            const originalImg = gridImage.querySelector('img');
            if (gridImage && originalImg) {
                const videoElement = createVideoElement(videoMappings[href]);
                gridImage.style.position = 'relative';
                originalImg.style.opacity = '1';
                gridImage.appendChild(videoElement);
            }
        }
    });
});
</script>
<style>
.grid-image {
    padding-bottom: 56.25% !important;
}

.grid-image-inner-wrapper {
    position: absolute !important;
  overflow: hidden;
}

.grid-image-inner-wrapper div {
    pointer-events: none;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
}
  a.grid-item img {
      opacity: 0 !important;
  }
  a.grid-item iframe {
      opacity: 1 !important;
  }
</style>

#4. Note

#4.1. Remember to update Portfolio item url + Vimeo Embed Code

#4.2. In Vimeo Embed Code, you can remove this script line code