From 9d54e0e83b73c73ca13400503ad87fba4cf91085 Mon Sep 17 00:00:00 2001
From: Rob Kelly <contact@robkel.ly>
Date: Sat, 20 Dec 2025 17:20:50 -0700
Subject: [PATCH] Youtube API carousel interaction progress (maybe? needs live
 testing)

---
 www/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/www/index.html b/www/index.html
index 56c6f61..a1e88f9 100644
--- a/www/index.html
+++ b/www/index.html
@@ -10,6 +10,7 @@
         <link href="style.css" rel="stylesheet">
     </head>
     <body>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
         <div class="overflow-auto d-flex flex-column dvh-100">
             <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
@@ -59,7 +60,7 @@
                     <div class="carousel-item active">
                         <div class="carousel-fit">
                             <div class="ratio ratio-16x9 d-block">
-                                <iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                                <iframe src="https://www.youtube.com/embed/XxUMn7iG4YM?si=ER9NUp7lmwWF25rx&enablejsapi=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen anonymous></iframe>
                             </div>
                         </div>
                         <div class="carousel-caption d-none d-md-block text-light bg-black mb-3">
@@ -187,12 +188,11 @@
         });
     </script>
     <script>
-        (function() {
-            // Executes when DOM available
-            document.getElementById('gameDemoCarousel').on('slide.bs.carousel', function(event) {
+        $(document).ready(function() {
+            $('#gameDemoCarousel').on('slide.bs.carousel', function(event) {
                 players[event.from].pauseVideo();
             });
-        })();
+        });
 
         var tag = document.createElement('script');
         tag.src = "https://www.youtube.com/iframe_api";
@@ -210,9 +210,9 @@
         }
         function onPlayerStateChange(event) {
             if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING) {
-                document.getElementById("gameDemoCarousel").carousel('pause');
+                $("#gameDemoCarousel").carousel('pause');
             } else {
-                document.getElementById("gameDemoCarousel").carousel();
+                $("#gameDemoCarousel").carousel();
             }
         }
     </script>
