/* General Page Styling */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; } .container { width: 90%; margin: 0 auto; padding-top: 30px; } .page-title { text-align: center; color: #333; font-size: 2.5rem; margin-bottom: 30px; } /* Video Gallery Styles */ .video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .video-card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .video-card:hover { transform: scale(1.05); } .video-player { width: 100%; height: auto; border-bottom: 2px solid #eee; } .video-title { text-align: center; padding: 10px; background-color: #f9f9f9; font-size: 1.1rem; color: #333; margin: 0; } /* Responsive Design */ @media (max-width: 768px) { .video-gallery { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .video-gallery { grid-template-columns: 1fr; } } document.addEventListener("DOMContentLoaded", function() { const videos = document.querySelectorAll(".video-player"); // Function to check if video is in view function checkIfInView() { videos.forEach((video) => { const rect = video.getBoundingClientRect(); if (rect.top >= 0 && rect.bottom <= window.innerHeight) { if (video.paused) { video.play(); // Play video if it's in view } } else { if (!video.paused) { video.pause(); // Pause video if it's out of view } } }); } // Check if the videos are in view whenever the user scrolls window.addEventListener("scroll", checkIfInView); // Initial check to play any videos already in view on page load checkIfInView(); });