- Support: [email protected]
- View demo – password: abc
Description
- click Image Block will open Vimeo in Lightbox with caption under video
- works with Personal/Basic Plan/higher
#1. Install Code
Hover page where you want to use Image Block > Click Gear icon
Paste this code
<style>
:root {
--tp-font-family: "Instrument Serif";
--tp-progress-bar-height: 1px;
}
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0);z-index:9999;opacity:0;transition:opacity 0.3s ease}.lightbox.active{display:flex;opacity:1;align-items:center;justify-content:center}.lightbox-content{position:relative;width:100%;background:#000;border-radius:10px;overflow:hidden;transition:transform 0.3s ease}.video-container{position:relative;width:100%;height:0;padding-bottom:56.25%}.video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;cursor:pointer}.video-player{position:absolute;top:0;left:0;width:100%;height:100%}.video-controls{position:absolute;bottom:30px;left:0;right:0;background:linear-gradient(transparent,rgb(0 0 0 / .8));padding:20px 15px 15px;opacity:0;transition:opacity 0.3s ease;z-index:10}.lightbox-content:hover .video-controls{opacity:1}.progress-section{display:flex;align-items:center;gap:10px}.play-pause-icon{color:#fff;font-size:12px;cursor:pointer;transition:opacity 0.2s ease;width:15px;text-align:center}.play-pause-icon:hover{opacity:.9}.progress-container{flex:1;height:var(--tp-progress-bar-height);background:hsl(0 0% 100% / .2);border-radius:3px;cursor:pointer}.progress-bar{height:100%;background:#fff;border-radius:3px;width:0%;transition:width 0.1s ease}.time-remaining{color:#fff;font-size:12px;margin-left:10px;font-family:var(--tp-font-family);white-space:nowrap}.video-caption{color:#fff;font-size:14px;margin-top:10px;text-align:center;opacity:.9;font-family:var(--tp-font-family)}.close-btn{position:fixed;top:10px;right:10px;background:#fff0;border:none;cursor:pointer;z-index:10;padding:0;width:20px;height:20px}.close-btn svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1;transition:opacity 0.2s ease}.close-btn:hover svg{opacity:.7}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-family:var(--tp-font-family)}@media (max-width:768px){.lightbox-content{width:95%;margin:20px}.video-controls{padding:15px 10px 10px}.video-caption{font-size:12px}.close-btn{top:15px;right:15px;width:30px;height:30px}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class=lightbox id=videoLightbox><div class=lightbox-content><button class=close-btn id=closeBtn><svg viewBox="0 0 40 40"><path d=M4.3,35.7L35.7,4.3></path><path d=M4.3,4.3l31.4,31.4></path></svg></button><div class=loading id=loading>Loading...</div><div class=video-container id=videoContainer><iframe allow="autoplay; fullscreen; picture-in-picture"class=video-player frameborder=0 id=videoPlayer></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><i class="fa-play fa-solid"></i></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-caption id=videoCaption></div></div></div></div>
<script src="https://code.beaverhero.com/imageblock/imgvimeolb.js"></script>
#2. Usage
You can add Vimeo Link in Link field and Text in ALT field
#3. Customize
You can change font family of text in Line 03
--tp-font-family: "Instrument Serif";
If you use Personal/Basic Plan, you can email or message me, I can install plugin for you.