Video Grid - Continuous Loop with Play Icon /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px 0; min-height: 100vh; overflow-x: auto; } /* Video Grid Layout */ .video-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 30px auto; max-width: 1200px; padding: 0 10px; } .video-column { position: relative; width: 116px; height: 207px; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; cursor: pointer; } .video-column:hover { transform: scale(1.08); } .video-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; filter: blur(2px); } /* Colorful Animated Play Button */ .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 1; pointer-events: none; backdrop-filter: blur(3px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .play-button::before { content: ''; display: inline-block; margin-left: 3px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #333; transition: all 0.3s ease; } /* === Colorful Pulse & Glow Animation === */ @keyframes colorful-pulse { 0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 25px rgba(0, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); } 50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 25px rgba(255, 215, 0, 0.7), 0 0 35px rgba(0, 255, 0, 0.6), 0 0 45px rgba(255, 140, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.3); } 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 15px rgba(0, 123, 255, 0.6), 0 0 25px rgba(75, 0, 130, 0.7), 0 2px 8px rgba(0, 0, 0, 0.3); } } @keyframes rainbow-glow { 0% { box-shadow: 0 0 12px rgba(255, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 20% { box-shadow: 0 0 12px rgba(255, 165, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 40% { box-shadow: 0 0 12px rgba(255, 255, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 60% { box-shadow: 0 0 12px rgba(0, 255, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 80% { box-shadow: 0 0 12px rgba(0, 123, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 100% { box-shadow: 0 0 12px rgba(139, 0, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } } .play-button { animation: colorful-pulse 3s infinite ease-in-out; } .video-column:hover .play-button { animation: colorful-pulse 2.5s infinite ease-in-out, rainbow-glow 1.5s infinite linear; } /* Status indicator for debugging */ .video-status { display: none; } /* Responsive: Mobile - 3 Columns */ @media (max-width: 768px) { .video-row { gap: 15px; } .video-column { width: calc(33.33% - 10px); height: auto; aspect-ratio: 9/16; min-width: 80px; max-width: 120px; } .play-button { width: 40px; height: 40px; } .play-button::before { border-width: 8px 0 8px 12px; margin-left: 2px; } } @media (max-width: 480px) { .video-row { gap: 12px; padding: 0 5px; } .video-column { width: calc(33.33% - 8px); min-width: 70px; max-width: 100px; } .play-button { width: 35px; height: 35px; } .play-button::before { border-width: 7px 0 7px 10px; margin-left: 2px; } } @media (max-width: 360px) { .video-column { width: calc(33.33% - 6px); min-width: 60px; } .play-button { width: 30px; height: 30px; } .play-button::before { border-width: 6px 0 6px 9px; margin-left: 2px; } } Your browser does not support the video tag. Ready Your browser does not support the video tag. Ready Your browser does not support the video tag. Ready let videosInitialized = false; let playAttempted = false; // Function to start all videos function startAllVideos() { if (playAttempted) return; playAttempted = true; const videos = document.querySelectorAll('video'); const statusElements = document.querySelectorAll('.video-status'); videos.forEach((video, index) => { const status = statusElements[index]; // Ensure video properties are set video.muted = true; video.loop = true; video.playsInline = true; // Try to play const playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(() => { console.log(`Video ${index + 1} started playing`); status.textContent = 'Playing'; status.style.background = 'rgba(0, 150, 0, 0.7)'; }).catch(error => { console.warn(`Video ${index + 1} autoplay failed:`, error); status.textContent = 'Click to play'; status.style.background = 'rgba(150, 0, 0, 0.7)'; }); } }); } // Function to open website in new window function openWebsite() { window.open('https://waeck.net', '_blank'); } // Initialize on page load function initializeVideos() { if (videosInitialized) return; videosInitialized = true; // Wait a moment for videos to load metadata setTimeout(() => { startAllVideos(); }, 500); } // Multiple event listeners to handle different scenarios document.addEventListener('DOMContentLoaded', initializeVideos); window.addEventListener('load', initializeVideos); // Handle user interaction to unlock autoplay on mobile function handleUserInteraction() { startAllVideos(); // Remove listeners after first interaction document.removeEventListener('touchstart', handleUserInteraction); document.removeEventListener('click', handleUserInteraction); } document.addEventListener('touchstart', handleUserInteraction, { passive: true }); document.addEventListener('click', handleUserInteraction); // Handle visibility change (when tab becomes visible) document.addEventListener('visibilitychange', () => { if (!document.hidden) { setTimeout(startAllVideos, 100); } }); // Ensure videos keep looping (fallback) setInterval(() => { document.querySelectorAll('video').forEach((video) => { if (!video.paused && video.currentTime > 0 && video.ended) { video.currentTime = 0; video.play(); } }); }, 1000); // Add event listeners to all videos document.querySelectorAll('video').forEach((video, index) => { const status = document.querySelectorAll('.video-status')[index]; video.addEventListener('ended', () => { video.currentTime = 0; video.play(); }); video.addEventListener('error', (e) => { console.error(`Video ${index + 1} error:`, e); status.textContent = 'Error'; status.style.background = 'rgba(150, 0, 0, 0.7)'; }); video.addEventListener('loadstart', () => { status.textContent = 'Loading'; status.style.background = 'rgba(0, 0, 150, 0.7)'; }); video.addEventListener('canplay', () => { if (status.textContent === 'Loading') { status.textContent = 'Ready'; status.style.background = 'rgba(100, 100, 100, 0.7)'; } }); }); Video Grid - Continuous Loop with Play Icon /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px 0; min-height: 100vh; overflow-x: auto; } /* Video Grid Layout */ .video-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 30px auto; max-width: 1200px; padding: 0 10px; } .video-column { position: relative; width: 116px; height: 207px; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; cursor: pointer; } .video-column:hover { transform: scale(1.08); } .video-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; filter: blur(2px); } /* Always-Visible Play Button */ .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 1; pointer-events: none; backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .play-button::before { content: ''; display: inline-block; margin-left: 3px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #333; } /* Attractive Play Button Animation */ @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 2px 8px rgba(0, 0, 0, 0.3); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); } 50% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.4); } } .play-button { animation: pulse 2.5s infinite ease-in-out, glow 3s infinite alternate; } /* Optional: Slight bounce on hover for interactivity */ .video-column:hover .play-button { animation-duration: 1.5s; animation-timing-function: ease-out; } /* Status indicator for debugging */ .video-status { display: none; } /* Responsive: Mobile - 3 Columns */ @media (max-width: 768px) { .video-row { gap: 15px; } .video-column { width: calc(33.33% - 10px); height: auto; aspect-ratio: 9/16; min-width: 80px; max-width: 120px; } .play-button { width: 40px; height: 40px; } .play-button::before { border-width: 8px 0 8px 12px; margin-left: 2px; } } @media (max-width: 480px) { .video-row { gap: 12px; padding: 0 5px; } .video-column { width: calc(33.33% - 8px); min-width: 70px; max-width: 100px; } .play-button { width: 35px; height: 35px; } .play-button::before { border-width: 7px 0 7px 10px; margin-left: 2px; } } @media (max-width: 360px) { .video-column { width: calc(33.33% - 6px); min-width: 60px; } .play-button { width: 30px; height: 30px; } .play-button::before { border-width: 6px 0 6px 9px; margin-left: 2px; } } Your browser does not support the video tag. Ready Your browser does not support the video tag. Ready Your browser does not support the video tag. Ready let videosInitialized = false; let playAttempted = false; // Function to start all videos function startAllVideos() { if (playAttempted) return; playAttempted = true; const videos = document.querySelectorAll('video'); const statusElements = document.querySelectorAll('.video-status'); videos.forEach((video, index) => { const status = statusElements[index]; // Ensure video properties are set video.muted = true; video.loop = true; video.playsInline = true; // Try to play const playPromise = video.play(); if (playPromise !== undefined) { playPromise.then(() => { console.log(`Video ${index + 1} started playing`); status.textContent = 'Playing'; status.style.background = 'rgba(0, 150, 0, 0.7)'; }).catch(error => { console.warn(`Video ${index + 1} autoplay failed:`, error); status.textContent = 'Click to play'; status.style.background = 'rgba(150, 0, 0, 0.7)'; }); } }); } // Function to open website in new window function openWebsite() { window.open('https://waeck.net', '_blank'); } // Function to toggle individual video (for manual control) function toggleVideo(container) { const video = container.querySelector('video'); const status = container.querySelector('.video-status'); if (video.paused) { video.play().then(() => { status.textContent = 'Playing'; status.style.background = 'rgba(0, 150, 0, 0.7)'; }).catch(error => { console.error('Failed to play video:', error); status.textContent = 'Error'; status.style.background = 'rgba(150, 0, 0, 0.7)'; }); } else { video.pause(); status.textContent = 'Paused'; status.style.background = 'rgba(150, 150, 0, 0.7)'; } } // Initialize on page load function initializeVideos() { if (videosInitialized) return; videosInitialized = true; // Wait a moment for videos to load metadata setTimeout(() => { startAllVideos(); }, 500); } // Multiple event listeners to handle different scenarios document.addEventListener('DOMContentLoaded', initializeVideos); window.addEventListener('load', initializeVideos); // Handle user interaction to unlock autoplay on mobile function handleUserInteraction() { startAllVideos(); // Remove listeners after first interaction document.removeEventListener('touchstart', handleUserInteraction); document.removeEventListener('click', handleUserInteraction); } document.addEventListener('touchstart', handleUserInteraction, { passive: true }); document.addEventListener('click', handleUserInteraction); // Handle visibility change (when tab becomes visible) document.addEventListener('visibilitychange', () => { if (!document.hidden) { setTimeout(startAllVideos, 100); } }); // Ensure videos keep looping (fallback) setInterval(() => { document.querySelectorAll('video').forEach((video, index) => { if (!video.paused && video.currentTime > 0 && video.ended) { video.currentTime = 0; video.play(); } }); }, 1000); // Handle video events document.querySelectorAll('video').forEach((video, index) => { const status = document.querySelectorAll('.video-status')[index]; video.addEventListener('ended', () => { video.currentTime = 0; video.play(); }); video.addEventListener('error', (e) => { console.error(`Video ${index + 1} error:`, e); status.textContent = 'Error'; status.style.background = 'rgba(150, 0, 0, 0.7)'; }); video.addEventListener('loadstart', () => { status.textContent = 'Loading'; status.style.background = 'rgba(0, 0, 150, 0.7)'; }); video.addEventListener('canplay', () => { if (status.textContent === 'Loading') { status.textContent = 'Ready'; status.style.background = 'rgba(100, 100, 100, 0.7)'; } }); });
