Portfolio Preview Video (Vimeo)

Description:

• Show preview autoplay video on hover Portfolio item
• Works with Vimeo video only

Changelog

• 25/08/2025: Updated an option to fix image always appears behind video
• 26/08/2025: Updated option to replace image with video before hovering

#1. First, click Gear icon in Portfolio Page

#2. Click Advanced > Paste code to right box

<script>document.addEventListener('DOMContentLoaded',function(){function getVimeoId(url){const match=url.match(/vimeo\.com\/(\d+)/);return match?match[1]:null}
function isValidUrl(string){try{new URL(string);return!0}catch(_){return!1}}
function createVimeoIframe(videoId){const iframe=document.createElement('iframe');iframe.src=`https://player.vimeo.com/video/${videoId}?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.setAttribute('allow','autoplay');return iframe}
document.querySelectorAll('.grid-item').forEach(item=>{const href=item.getAttribute('href');if(href){fetch(href+'?format=json-pretty').then(response=>response.json()).then(data=>{const seoDescription=data.item?.seoData?.seoDescription;if(seoDescription&&isValidUrl(seoDescription.trim())){const videoUrl=seoDescription.trim();const vimeoId=getVimeoId(videoUrl);if(vimeoId){const gridImage=item.querySelector('.grid-image-inner-wrapper');const originalImg=gridImage.querySelector('img');if(gridImage&&originalImg){const iframe=createVimeoIframe(vimeoId);gridImage.style.position='relative';originalImg.style.opacity='1';gridImage.appendChild(iframe)}}}}).catch(error=>console.log('Cannot get data:',href))}})});</script>
<style>.grid-image-inner-wrapper iframe:nth-child(3){display:none!important}.grid-image-inner-wrapper{position:relative;overflow:hidden}.grid-image-inner-wrapper img{transition:opacity 0.3s ease}.grid-image-inner-wrapper iframe{opacity:0;transition:opacity 0.3s ease}.grid-image{padding-bottom:56.25%!important}.grid-image-inner-wrapper{position:absolute!important}.grid-image-inner-wrapper iframe{pointer-events:none}.grid-item .grid-image-inner-wrapper>img{object-fit:contain!important}a.grid-item:hover iframe{opacity:1!important}</style>

#3. Click Settings on each Portfolio Item

#4. Enter Vimeo link into SEO Description

Like this

Or like this.

#5. Update

#5.1. If image still appears on hover portfolio item, you can add this extra code under #2 code

<style>
a.grid-item:hover img {
      opacity: 0 !important;
  }
</style>

#5.2. If you want replace Image with Video (before hover) so Portfolio Page will always show Video, you can add this extra code under #2 code

<style>
a.grid-item img {
    opacity: 0 !important;
}
a.grid-item iframe {
    opacity: 1 !important;
}
</style>