Auto rotate 3 video slider

by

Description: autorotate 3 videos. Once 1 video is done playing, it rotates to the next one

#1. First, add a People List Section

#2. Next, enable Image + Button only

#3. Next, remove all images

#4. Add Vimeo URL to Button

#5. Use this code to Page Header Injection

<style>.list-item{flex-direction:column;position:relative}.list-item-content__button-wrapper{display:none!important}.video-container{position:relative;width:100%;padding-bottom:75%;background:#000;border-radius:8px;overflow:hidden;margin-bottom:20px}.vimeo-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgb(0 0 0 / .8);color:#fff;border:none;border-radius:50%;width:80px;height:80px;font-size:28px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.play-button:hover{background:rgb(0 0 0 / .9);transform:translate(-50%,-50%) scale(1.1)}.play-button.playing{background:rgb(0 0 0 / .6);opacity:.7}</style>
<script>(function(){let currentPlayingVideo=null;let videoPlayers=[];let isAutoPlaying=!1;let initialized=!1;function extractVimeoId(url){const match=url.match(/vimeo\.com\/(\d+)/);return match?match[1]:null}
function createVimeoPlayer(vimeoId,autoplay=!1){const iframe=document.createElement('iframe');const autoplayParam=autoplay?'1':'0';iframe.src=`https://player.vimeo.com/video/${vimeoId}?autoplay=${autoplayParam}&loop=0&muted=0&background=0&controls=0`;iframe.className='vimeo-iframe';iframe.allow='autoplay; fullscreen; picture-in-picture';iframe.setAttribute('allowfullscreen','');return iframe}
function createPlayButton(isAutoplay=!1){const button=document.createElement('button');button.className='play-button';button.innerHTML='▶';if(isAutoplay){button.style.display='none'}
return button}
function setupVideoPlayer(listItem,vimeoUrl,videoIndex,isFirstVideo=!1){const vimeoId=extractVimeoId(vimeoUrl);if(!vimeoId)return;const buttonWrapper=listItem.querySelector('.list-item-content__button-wrapper');if(buttonWrapper){buttonWrapper.style.display='none'}
const videoContainer=document.createElement('div');videoContainer.className='video-container';videoContainer.setAttribute('data-video-index',videoIndex);const iframe=createVimeoPlayer(vimeoId,isFirstVideo);const playButton=createPlayButton(isFirstVideo);videoContainer.appendChild(iframe);videoContainer.appendChild(playButton);listItem.insertBefore(videoContainer,listItem.firstChild);const playerData={iframe:iframe,playButton:playButton,container:videoContainer,videoIndex:videoIndex,vimeoId:vimeoId,isPlaying:isFirstVideo,hasEnded:!1};videoPlayers[videoIndex]=playerData;if(isFirstVideo){currentPlayingVideo=playerData;isAutoPlaying=!0;playButton.classList.add('playing')}
playButton.addEventListener('click',function(e){e.preventDefault();e.stopPropagation();if(currentPlayingVideo&&currentPlayingVideo!==playerData){pauseVideo(currentPlayingVideo)}
if(playerData.isPlaying){pauseVideo(playerData)}else{playVideo(playerData)}});playButton.addEventListener('mouseenter',function(){if(!playerData.isPlaying){this.style.background='rgba(0,0,0,0.9)';this.style.transform='translate(-50%, -50%) scale(1.1)'}});playButton.addEventListener('mouseleave',function(){if(!playerData.isPlaying){this.style.background='rgba(0,0,0,0.8)';this.style.transform='translate(-50%, -50%) scale(1)'}});iframe.addEventListener('load',function(){setTimeout(()=>{iframe.contentWindow.postMessage('{"method":"addEventListener","value":"play"}','*');iframe.contentWindow.postMessage('{"method":"addEventListener","value":"pause"}','*');iframe.contentWindow.postMessage('{"method":"addEventListener","value":"ended"}','*');iframe.contentWindow.postMessage('{"method":"addEventListener","value":"finish"}','*');console.log('Đã kích hoạt event listeners cho video',videoIndex)},1000)})}
function playVideo(playerData){playerData.iframe.contentWindow.postMessage('{"method":"play"}','*');playerData.isPlaying=!0;playerData.playButton.innerHTML='⏸';playerData.playButton.classList.add('playing');currentPlayingVideo=playerData}
function pauseVideo(playerData){playerData.iframe.contentWindow.postMessage('{"method":"pause"}','*');playerData.isPlaying=!1;playerData.playButton.innerHTML='▶';playerData.playButton.classList.remove('playing');playerData.playButton.style.display='flex'}
function playNextVideo(){if(!currentPlayingVideo){console.log('Không có video hiện tại để chuyển');return}
const currentIndex=currentPlayingVideo.videoIndex;const nextIndex=currentIndex+1;console.log('Video hiện tại:',currentIndex,'- Video tiếp theo:',nextIndex);if(nextIndex<videoPlayers.length&&videoPlayers[nextIndex]){console.log('Tạm dừng video',currentIndex,'và chuẩn bị play video',nextIndex);pauseVideo(currentPlayingVideo);setTimeout(()=>{console.log('Bắt đầu play video',nextIndex);playVideo(videoPlayers[nextIndex])},1000)}else{console.log('Đã hết video, dừng autoplay');pauseVideo(currentPlayingVideo);isAutoPlaying=!1}}
window.addEventListener('message',function(event){if(event.origin!=='https://player.vimeo.com')return;try{const data=JSON.parse(event.data);const playerData=videoPlayers.find(p=>p&&event.source===p.iframe.contentWindow);if(!playerData)return;console.log('Vimeo event nhận được:',data.event,'cho video',playerData.videoIndex);if(data.event==='play'){playerData.isPlaying=!0;playerData.playButton.innerHTML='⏸';playerData.playButton.classList.add('playing');if(isAutoPlaying){playerData.playButton.style.display='none'}
currentPlayingVideo=playerData}else if(data.event==='pause'){playerData.isPlaying=!1;playerData.playButton.innerHTML='▶';playerData.playButton.classList.remove('playing');playerData.playButton.style.display='flex'}else if(data.event==='ended'||data.event==='finish'){console.log('Video',playerData.videoIndex,'đã kết thúc - chuẩn bị play video tiếp theo');playerData.hasEnded=!0;playerData.isPlaying=!1;playerData.playButton.innerHTML='▶';playerData.playButton.classList.remove('playing');playerData.playButton.style.display='flex';if(isAutoPlaying){console.log('Đang chuyển sang video tiếp theo...');playNextVideo()}}}catch(e){console.log('Message parsing error:',e)}});function initializeVideoCarousel(){if(initialized)return;console.log('Đang khởi tạo video...');const listItems=document.querySelectorAll('.user-items-list-item-container .list-item');console.log('Tìm thấy',listItems.length,'list items');if(listItems.length===0)return;listItems.forEach((listItem,index)=>{console.log('=== Item',index,'===');console.log('HTML của item:',listItem.innerHTML);const buttonLink=listItem.querySelector('a[href*="vimeo"]');console.log('Button link (vimeo):',buttonLink);if(!buttonLink){const allLinks=listItem.querySelectorAll('a');console.log('Tất cả links:',allLinks);allLinks.forEach((link,i)=>{console.log(`Link ${i}:`,link.getAttribute('href'))})}
if(buttonLink){const vimeoUrl=buttonLink.getAttribute('href');console.log('Vimeo URL:',vimeoUrl);if(vimeoUrl&&vimeoUrl.includes('vimeo.com')){setupVideoPlayer(listItem,vimeoUrl,index,index===0)}}});initialized=!0}
function checkAndInit(){const listItems=document.querySelectorAll('.user-items-list-item-container .list-item');if(listItems.length>0&&!initialized){initializeVideoCarousel()}}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',function(){setTimeout(checkAndInit,500)})}else{setTimeout(checkAndInit,500)}
setInterval(checkAndInit,2000);if(typeof window.Squarespace!=='undefined'){window.Squarespace.onInitialize(function(){setTimeout(initializeVideoCarousel,1000)})}})();</script>

#6. Result

Initial: first video autoplay

 

Buy me a coffee