This guide will help you set up a video lightbox on your site that dynamically loads Vimeo videos based on IDs entered in your CMS.
Ensure your HTML includes the necessary elements for the video lightbox and the video frame:
<!-- Video Lightbox -->
<div class="video-lightbox" style="display: none;">
<iframe class="portfolio-video-frame"
src=""
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
title="Video Lightbox">
</iframe>
</div>
<!-- Grid Items -->
<div class="grid-item">
<div class="video-id" style="display: none;">VIMEO_VIDEO_ID</div>
<!-- Other content of the grid item -->
</div>
<!-- Repeat .grid-item for each video -->
Include the following JavaScript to handle loading the video ID dynamically when a grid item is clicked:
htmlCopy code
<!-- Video Lightbox Script -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const videoLightbox = document.querySelector('.video-lightbox');
const iframe = document.querySelector('.portfolio-video-frame');
// Handle grid item click
document.querySelectorAll('.grid-item').forEach(item => {
item.addEventListener('click', function() {
const videoIdElement = item.querySelector('.video-id');
if (videoIdElement) {
const videoId = videoIdElement.textContent.trim();
if (videoId) {
iframe.src = `https://player.vimeo.com/video/${videoId}?dnt=1&autoplay=1`;
videoLightbox.style.display = 'flex'; // Show the lightbox
}
}
});
});
// Observe changes to the lightbox display
if (videoLightbox) {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
const style = window.getComputedStyle(videoLightbox);
if (style.display === 'flex') {
document.body.classList.add('no-scroll-lightbox');
} else {
document.body.classList.remove('no-scroll-lightbox');
iframe.removeAttribute('src');
}
}
});
});
observer.observe(videoLightbox, {
attributes: true,
attributeFilter: ['style']
});
}
});
</script>
<!-- Vimeo Player API -->
<script src="https://player.vimeo.com/api/player.js"></script>
In your CMS, ensure each .grid-item
includes a .video-id
element containing the Vimeo video ID you want to display. For example:
htmlCopy code
<div class="grid-item">
<div class="video-id" style="display: none;">YOUR_VIDEO_ID</div>
<!-- Other content of the grid item -->
</div>
Replace YOUR_VIDEO_ID
with the actual ID of the Vimeo video. Repeat this structure for each grid item you want to display.
To find the Vimeo video ID:
https://vimeo.com/123456789
.123456789
in this example)..video-id
element within your CMS.Ensure the videos you want to display are set to public in Vimeo:
By following these steps, you'll have a dynamic video lightbox that loads Vimeo videos when a grid item is clicked.