Learn English through Videos and Games

How to Use the Video Lightbox with Dynamic Vimeo IDs

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.

1. HTML Structure

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 -->


2. JavaScript for Dynamic Video Loading

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>


3. CMS Configuration

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.

4. Locating the Video ID

To find the Vimeo video ID:

1. Navigate to the Vimeo video page.
2. Look at the URL in your browser's address bar. It will look something like this: https://vimeo.com/123456789.
3. The video ID is the numeric part at the end of the URL (123456789 in this example).
4. Enter this numeric ID in the .video-id element within your CMS.

5. Privacy Settings

Ensure the videos you want to display are set to public in Vimeo:

1. Go to your Vimeo video settings.
2. Under the "Privacy" section, set the video to "Public" to ensure it can be embedded and viewed by anyone visiting your site.

Summary

1. HTML: Add the lightbox and grid items with video IDs.
2. JavaScript: Include the script to handle dynamic video loading and lightbox display.
3. CMS: Configure your grid items to include the Vimeo video IDs.
4. Locate Video ID: Extract the video ID from the Vimeo URL.
5. Privacy Settings: Ensure the videos are public to be accessible.

By following these steps, you'll have a dynamic video lightbox that loads Vimeo videos when a grid item is clicked.

‍