Drone Photography

document.addEventListener('DOMContentLoaded', () => { const videos = document.querySelectorAll('.scrollable-video'); // Wait for videos to load metadata Promise.all(Array.from(videos).map(v => new Promise(resolve => { if (v.readyState >= 1) resolve(); else v.addEventListener('loadedmetadata', resolve); }))).then(() => { const updateVideos = () => { const viewportHeight = window.innerHeight; const scrollY = window.scrollY || window.pageYOffset; videos.forEach(video => { const rect = video.getBoundingClientRect(); const videoTop = rect.top + scrollY; const startScroll = videoTop - viewportHeight; // when it enters from bottom const endScroll = videoTop + rect.height; // when it passes top const progress = (scrollY - startScroll) / (endScroll - startScroll); const clampedProgress = Math.min(Math.max(progress, 0), 1); if (clampedProgress <= 0.5) { // Map 0..0.5 to 0..1 const playbackProgress = clampedProgress / 0.5; video.currentTime = playbackProgress * video.duration; } else { // Hold on last frame video.currentTime = video.duration; } }); }; window.addEventListener('scroll', updateVideos); window.addEventListener('resize', updateVideos); // Initialize updateVideos(); }); });