// Wrap in IIFE to avoid variable conflicts with other scripts (function () { // Log when script loads console.log('video-embeds.js loaded'); function createVideoModal() { console.log('Creating video modal'); const modalHtml = ` `; const style = document.createElement('style'); style.textContent = ` .video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } .video-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); } .video-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; background: #000; border-radius: 8px; overflow: hidden; } .video-modal-close { position: absolute; top: 10px; right: 10px; z-index: 1; background: rgba(255, 255, 255, 0.9); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; } .video-modal-close:hover { background: #fff; } .video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } `; document.head.appendChild(style); document.body.insertAdjacentHTML('beforeend', modalHtml); const modal = document.getElementById('videoModal'); const overlay = modal.querySelector('.video-modal-overlay'); const closeBtn = modal.querySelector('button'); const videoFrame = document.getElementById('videoFrame'); function closeModal() { modal.style.display = 'none'; videoFrame.src = ''; document.body.style.overflow = ''; } overlay.addEventListener('click', closeModal); closeBtn.addEventListener('click', closeModal); // Close on Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.style.display !== 'none') { closeModal(); } }); return modal; } function openVideoModal(url) { console.log('Opening video modal for URL:', url); let modal = document.getElementById('videoModal'); if (!modal) { modal = createVideoModal(); } const videoFrame = document.getElementById('videoFrame'); // Convert YouTube URLs to embed format let embedUrl = url; const youtubeMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\n?#]+)/); if (youtubeMatch) { embedUrl = `https://www.youtube.com/embed/${youtubeMatch[1]}`; } // Convert Vimeo URLs to embed format const vimeoMatch = url.match(/vimeo\.com\/(\d+)/); if (vimeoMatch) { embedUrl = `https://player.vimeo.com/video/${vimeoMatch[1]}`; } // Convert Loom URLs to embed format const loomMatch = url.match(/loom\.com\/share\/([a-zA-Z0-9]+)/); if (loomMatch) { embedUrl = `https://www.loom.com/embed/${loomMatch[1]}`; } videoFrame.src = embedUrl; modal.style.display = 'block'; document.body.style.overflow = 'hidden'; } function lookForVideoEmbeds() { const videoEmbeds = document.querySelectorAll('[data-video]:not([data-video-initialized])'); console.log('Found video embeds:', videoEmbeds.length); videoEmbeds.forEach((embed) => { const videoUrl = embed.getAttribute('data-video'); console.log('Attaching listener to element with video URL:', videoUrl); embed.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); console.log('Video element clicked, opening modal for:', videoUrl); openVideoModal(videoUrl); }); // Mark as initialized to avoid duplicate listeners embed.setAttribute('data-video-initialized', 'true'); }); } // Run initial scan when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { console.log('DOM loaded, looking for video embeds'); lookForVideoEmbeds(); }); } else { console.log('DOM already loaded, looking for video embeds immediately'); lookForVideoEmbeds(); } // Set up MutationObserver to watch for DOM changes const observer = new MutationObserver((mutations) => { console.log('DOM mutations detected, checking for new video embeds'); lookForVideoEmbeds(); }); // Start observing the document body for changes observer.observe(document.body, { childList: true, subtree: true, }); })(); // End IIFE

Offline demos