Description
+ Vimeo Carousel
+ Click button open Vimeo Lightbox
#1. Add a People Section > Carousel
Make sure you choose Carousel
#2. Click Content to edit item
#3. Enter Vimeo URL to Button
#4. Use this code to Page Header Injection
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<style>.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .9);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease}.lightbox.active{opacity:1;visibility:visible}.lightbox-content{position:relative;width:90%;max-width:900px;height:80%;background:#000;border-radius:8px;overflow:hidden}.close-btn{position:absolute;top:15px;right:15px;background:rgb(255 255 255 / .2);color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;z-index:10001;font-size:14px;transition:background 0.3s ease}.close-btn:hover{background:rgb(255 255 255 / .3)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:700;z-index:10000}.video-container{width:100%;height:calc(100% - 80px);position:relative}.video-player{width:100%;height:100%}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}.video-controls{position:absolute;bottom:0;left:0;width:100%;background:linear-gradient(transparent,rgb(0 0 0 / .8));padding:20px;color:#fff;display:none}.progress-section{display:flex;align-items:center;margin-bottom:10px}.play-pause-icon{margin-right:15px;cursor:pointer;font-size:16px}.progress-container{flex:1;height:4px;background:rgb(255 255 255 / .3);border-radius:2px;cursor:pointer;position:relative}.progress-bar{height:100%;background:#ff6b6b;border-radius:2px;width:0%;transition:width 0.1s ease}.time-remaining{margin-left:15px;font-size:14px;min-width:40px}.video-title{font-size:14px;opacity:.9}</style>
<div id="videoLightbox" class="lightbox">
<div class="lightbox-content">
<button class="close-btn" id="closeBtn">Close</button>
<div class="loading" id="loading">Loading...</div>
<div class="video-container" id="videoContainer">
<iframe id="videoPlayer" class="video-player" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
<div class="video-overlay" id="videoOverlay"></div>
</div>
<div class="video-controls" id="videoControls">
<div class="progress-section">
<span class="play-pause-icon" id="playPauseBtn">▶</span>
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
</div>
<span class="time-remaining" id="timeRemaining">0:00</span>
</div>
<div class="video-title" id="videoTitle"></div>
</div>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded',function(){const lightbox=document.getElementById('videoLightbox');const videoContainer=document.getElementById('videoContainer');const closeBtn=document.getElementById('closeBtn');const loading=document.getElementById('loading');const playPauseBtn=document.getElementById('playPauseBtn');const progressContainer=document.getElementById('progressContainer');const progressBar=document.getElementById('progressBar');const videoControls=document.getElementById('videoControls');const videoTitle=document.getElementById('videoTitle');let player=null;let isPlaying=!1;let duration=0;let currentTime=0;function getVimeoId(url){const match=url.match(/vimeo\.com\/(\d+)/);return match?match[1]:null}
function cleanupPlayer(){if(player){try{player.destroy()}catch(e){console.log('Error destroying player:',e)}
player=null}
const existingIframe=document.getElementById('videoPlayer');if(existingIframe){existingIframe.remove()}
videoTitle.textContent=''}
function createNewIframe(){const newIframe=document.createElement('iframe');newIframe.id='videoPlayer';newIframe.className='video-player';newIframe.setAttribute('frameborder','0');newIframe.setAttribute('allow','autoplay; fullscreen; picture-in-picture');videoContainer.appendChild(newIframe);return newIframe}
function openLightbox(videoUrl){const vimeoId=getVimeoId(videoUrl);if(!vimeoId)return;cleanupPlayer();lightbox.classList.add('active');loading.style.display='block';videoControls.style.display='none';setTimeout(()=>{const iframe=createNewIframe();iframe.src=`https://player.vimeo.com/video/${vimeoId}?api=1&autoplay=1&controls=0`;if(window.Vimeo){setTimeout(()=>{initializeVimeoPlayer(iframe)},500)}else{const script=document.createElement('script');script.src='https://player.vimeo.com/api/player.js';script.onload=function(){setTimeout(()=>{initializeVimeoPlayer(iframe)},500)};document.head.appendChild(script)}},100)}
function initializeVimeoPlayer(iframe){try{player=new Vimeo.Player(iframe);player.ready().then(function(){loading.style.display='none';videoControls.style.display='block';player.play().catch(function(error){console.log('Autoplay failed:',error)});return Promise.all([player.getDuration(),player.getVideoTitle()])}).then(function(values){duration=values[0];videoTitle.textContent=values[1]}).catch(function(error){console.log('Player error:',error);loading.style.display='none';videoControls.style.display='block'});player.on('play',function(){isPlaying=!0;playPauseBtn.innerHTML='⏸'});player.on('pause',function(){isPlaying=!1;playPauseBtn.innerHTML='▶'});player.on('timeupdate',function(data){currentTime=data.seconds;const progress=(currentTime/duration)*100;progressBar.style.width=`${progress}%`;const remaining=duration-currentTime;const minutes=Math.floor(remaining/60);const seconds=Math.floor(remaining%60);document.getElementById('timeRemaining').textContent=`${minutes}:${seconds.toString().padStart(2, '0')}`})}catch(error){console.log('Error initializing player:',error);loading.style.display='none'}}
function closeLightbox(){lightbox.classList.remove('active');setTimeout(()=>{cleanupPlayer();isPlaying=!1;duration=0;currentTime=0;progressBar.style.width='0%';playPauseBtn.innerHTML='▶';document.getElementById('timeRemaining').textContent='0:00'},300)}
function setupVideoLinks(){document.querySelectorAll('.list-item-content__button[href*="vimeo.com"]').forEach(link=>{link.addEventListener('click',function(e){e.preventDefault();const videoUrl=this.getAttribute('href');openLightbox(videoUrl)})})}
setupVideoLinks();closeBtn.addEventListener('click',closeLightbox);lightbox.addEventListener('click',function(e){if(e.target===lightbox){closeLightbox()}});document.addEventListener('keydown',function(e){if(lightbox.classList.contains('active')){if(e.key==='Escape'){closeLightbox()}else if(e.key===' '&&player){e.preventDefault();if(isPlaying){player.pause()}else{player.play()}}}});playPauseBtn.addEventListener('click',function(){if(!player)return;if(isPlaying){player.pause()}else{player.play()}});progressContainer.addEventListener('click',function(e){if(!player)return;const rect=progressContainer.getBoundingClientRect();const clickX=e.clientX-rect.left;const width=rect.width;const percentage=clickX/width;const seekTime=percentage*duration;player.setCurrentTime(seekTime)});videoContainer.addEventListener('click',function(e){if(!player)return;if(e.target===videoContainer||e.target.id==='videoPlayer'){if(isPlaying){player.pause()}else{player.play()}}});const videoOverlay=document.getElementById('videoOverlay');videoOverlay.addEventListener('click',function(e){if(!player)return;e.stopPropagation();if(isPlaying){player.pause()}else{player.play()}})});</script>
