Don't autoplay video

Author: ThomasFarstrike

index.html

@@ -230,6 +230,74 @@
             cursor: pointer;
         }
 
+        /* Video play overlay container */
+        .video-container {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+
+        /* Video play overlay button */
+        .video-play-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.35);
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background 0.3s ease;
+            z-index: 10;
+        }
+
+        .video-play-overlay:hover {
+            background: rgba(0, 0, 0, 0.5);
+        }
+
+        .video-play-overlay:focus {
+            outline: 3px solid #FF6B6B;
+            outline-offset: 2px;
+        }
+
+        /* Play icon: circle with triangle */
+        .play-icon {
+            width: 72px;
+            height: 72px;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+
+        .video-play-overlay:hover .play-icon {
+            transform: scale(1.1);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+        }
+
+        /* CSS triangle for play symbol */
+        .play-icon::after {
+            content: "";
+            display: block;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 14px 0 14px 24px;
+            border-color: transparent transparent transparent #0A4D68;
+            margin-left: 6px; /* Optical centering */
+        }
+
+        /* Hide overlay when video is playing */
+        .video-play-overlay.hidden {
+            display: none;
+        }
+
         /* GitHub Link */
         .github-link {
             text-align: center;
@@ -419,7 +487,16 @@ <h2>Screenshots</h2>
                 <img src="screenshots/light/0.0.6/mpos_camera_qr_320x240.png" alt="Camera QR Code Screenshot"/>
                 <img src="screenshots/light/0.0.6/osupdate_progress3.png" alt="OS Update Progress Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_launcher1.png" alt="Dark Theme Launcher Screenshot"/>
-                <video autoplay loop muted playsinline poster="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" width="320" height="240" preload="auto" loading="lazy"><source src="videos/QuasiBird_0.0.3.mp4" type="video/mp4"><img src="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" alt="QuasiBird game in action"></video>
+                <!-- Video play overlay: wraps video with clickable play button -->
+                <div class="video-container">
+                    <video id="quasibird-video" playsinline poster="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" width="320" height="240" preload="auto">
+                        <source src="videos/QuasiBird_0.0.3.mp4" type="video/mp4">
+                        <img src="screenshots/light/0.3.2/com.quasikili.quasibird_0.0.3.png" alt="QuasiBird game in action">
+                    </video>
+                    <div class="video-play-overlay" id="quasibird-play-overlay" tabindex="0" role="button" aria-label="Play video">
+                        <div class="play-icon"></div>
+                    </div>
+                </div>
                 <img src="screenshots/dark/0.3.3/wifi_password.png" alt="Dark Theme WiFi Password Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_appstore_uninstall_draw.png" alt="Dark Theme App Store Uninstall Screenshot"/>
                 <img src="screenshots/dark/0.0.4/0.0.4_imu1.png" alt="Dark Theme IMU Screenshot"/>
@@ -495,5 +572,31 @@ <h2>Possibilities</h2>
             navLinks.classList.toggle('active');
         }
     </script>
+
+    <!-- JavaScript for Video Play Overlay -->
+    <script>
+        (function() {
+            const overlay = document.getElementById('quasibird-play-overlay');
+            const video = document.getElementById('quasibird-video');
+
+            if (overlay && video) {
+                function playVideo() {
+                    video.play();
+                    overlay.classList.add('hidden');
+                }
+
+                // Click handler
+                overlay.addEventListener('click', playVideo);
+
+                // Keyboard handler (Enter or Space)
+                overlay.addEventListener('keydown', function(e) {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        playVideo();
+                    }
+                });
+            }
+        })();
+    </script>
 </body>
 </html>