<!-- This code is generated by ChatGPT -->
<!-- Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="videoModalLabel">YouTube Video</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <iframe id="videoFrame" src="" title="YouTube video player" frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const videoModal = document.getElementById('videoModal');
  const videoFrame = document.getElementById('videoFrame');
  const modalTitle = document.getElementById('videoModalLabel');
  
  // Add click event to all video links
  const videoLinks = document.querySelectorAll('.video-link');
  videoLinks.forEach(link => {
    link.addEventListener('click', function () {
      const videoUrl = this.getAttribute('data-video-url');
      const videoTitle = this.getAttribute('data-title');
      
      // Dynamically set the video URL and title
      videoFrame.src = `${videoUrl}?autoplay=1`;
      videoFrame.title = videoTitle;
      modalTitle.textContent = videoTitle; // Also update the modal title if needed
    });
  });

  // Clear video when modal is closed
  videoModal.addEventListener('hidden.bs.modal', function () {
    videoFrame.src = "";  // Stop the video playback
    videoFrame.title = ""; // Clear the title
  });
</script>
