fix Youtube

app.js

@@ -3,38 +3,18 @@
 
     var TWITCH_CHANNEL = "duda_xd";
 
-    /* ------------------------------------------------------------------
-     * YouTube: Liest die Datei videos.json, die auf dem Server von
-     * fetch_videos.py (einmal am Tag per Cron) mit den aktuellen
-     * Video-IDs deines Kanals aktualisiert wird.
-     *
-     * Dein API-Key ist dabei NIE im Browser - er bleibt komplett auf
-     * dem Server versteckt (siehe fetch_videos.py).
-     * ------------------------------------------------------------------ */
-    function loadYouTube() {
+    /* Rendert die Video-IDs aus videos.js als iframes.
+     * Standard-iframe laut YouTube-Empfehlung. Bewusst OHNE
+     * referrerpolicy und OHNE ?si-Parameter: Dann sendet der Browser
+     * immer einen Referer (auch bei HTTP-Seite), den YouTube braucht,
+     * um den Embedder zu erkennen (sonst Fehler 152/153). */
+    function renderYouTubeGrid(videoIds) {
         var grid = document.getElementById("yt-grid");
         if (!grid) return;
-
-        fetch("videos.json", { cache: "no-cache" })
-            .then(function (r) {
-                if (!r.ok) throw new Error("HTTP " + r.status);
-                return r.json();
-            })
-            .then(function (ids) {
-                if (!Array.isArray(ids) || !ids.length) {
+        if (!videoIds || !videoIds.length) {
             grid.innerHTML = '<div class="loading">Noch keine Videos vorhanden.</div>';
             return;
         }
-                renderYouTubeGrid(ids);
-            })
-            .catch(function () {
-                grid.innerHTML =
-                    '<div class="loading error">Videos konnten nicht geladen werden.</div>';
-            });
-    }
-
-    function renderYouTubeGrid(videoIds) {
-        var grid = document.getElementById("yt-grid");
         var html = "";
         for (var i = 0; i < videoIds.length; i++) {
             var id = String(videoIds[i]).trim();
@@ -42,17 +22,31 @@
             html +=
                 '<div class="video-card">' +
                     '<div class="video-wrapper">' +
-                        '<iframe src="https://www.youtube.com/embed/' + id +
-                        '" title="Duda17 Video" ' +
-                        'frameborder="0" allow="accelerometer; autoplay; clipboard-write; ' +
-                        'encrypted-media; gyroscope; picture-in-picture; web-share" ' +
-                        'referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>' +
+                        '<iframe width="560" height="315" ' +
+                        'src="https://www.youtube.com/embed/' + id + '" ' +
+                        'title="YouTube video player" ' +
+                        'frameborder="0" ' +
+                        'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" ' +
+                        'allowfullscreen></iframe>' +
                     '</div>' +
                 '</div>';
         }
         grid.innerHTML = html || '<div class="loading">Keine Videos gefunden.</div>';
     }
 
+    /* ------------------------------------------------------------------
+     * YouTube: Liest die Video-IDs aus videos.js, die auf dem Server
+     * von fetch_videos.py (einmal am Tag per Cron) mit den aktuellen
+     * Video-IDs deines Kanals aktualisiert wird.
+     *
+     * Dein API-Key ist dabei NIE im Browser - er bleibt komplett auf
+     * dem Server versteckt (siehe fetch_videos.py).
+     * ------------------------------------------------------------------ */
+    function loadYouTube() {
+        var ids = (typeof DUDA17_VIDEOS !== "undefined") ? DUDA17_VIDEOS : [];
+        renderYouTubeGrid(ids);
+    }
+
     /* ------------------------------------------------------------------
      * Twitch: Live-Player einbetten.
      * ------------------------------------------------------------------ */

fetch_videos.py

@@ -6,8 +6,8 @@ Dieses Skript laeuft auf deinem Server (einmal am Tag per Cron)
 und holt automatisch die aktuellen Video-IDs deines YouTube-Kanals
 ueber die offizielle YouTube Data API v3.
 
-Es schreibt die Video-IDs in die Datei "videos.json", die deine
-Webseite dann einfach liest und anzeigt. So bleibt dein API-Key
+Es schreibt die Video-IDs in die Datei "videos.js", die deine
+Webseite dann per Script-Tag laedt und anzeigt. So bleibt dein API-Key
 auf dem Server versteckt und ist NICHT im Browser/DevTools sichtbar.
 
 EINRICHTUNG:
@@ -102,14 +102,18 @@ def main():
     # hier nach Erscheinungsdatum sortieren, um sicherzugehen)
     items.sort(key=lambda x: x.get("published") or "", reverse=True)
 
-    # Nur die IDs in die Datei schreiben - schlank fuer die Webseite,
-    # die nur die Embed-URLs braucht.
+    # Nur die Video-IDs in die Datei "videos.js" schreiben.
+    # videos.js wird per Script-Tag geladen - dadurch gibt es KEINE
+    # CORS-/fetch-Probleme und die Seite funktioniert ueberall.
     video_ids = [v["id"] for v in items]
 
     os.makedirs(OUT_DIR, exist_ok=True)
-    out_path = os.path.join(OUT_DIR, "videos.json")
+    out_path = os.path.join(OUT_DIR, "videos.js")
     with open(out_path, "w", encoding="utf-8") as f:
-        json.dump(video_ids, f, ensure_ascii=False, indent=2)
+        f.write("/* Automatisch generiert von fetch_videos.py - nicht manuell editieren. */\n")
+        f.write("var DUDA17_VIDEOS = ")
+        json.dump(video_ids, f, ensure_ascii=False, indent=4)
+        f.write(";\n")
 
     print(f"Erfolgreich. {len(video_ids)} Videos geschrieben nach {out_path}")
 

index.html

@@ -162,6 +162,7 @@
         </div>
     </footer>
 
+    <script src="videos.js"></script>
     <script src="app.js"></script>
 </body>
 </html>

videos.js

@@ -1,4 +1,5 @@
-[
+/* Automatisch generiert von fetch_videos.py - nicht manuell editieren. */
+var DUDA17_VIDEOS = [
     "HPEbsIInMEg",
     "4I8ay7l4Gfk",
     "AZycMlj2FJc",
@@ -7,4 +8,4 @@
     "8TJGbSExWTc",
     "KIpWKm5puIw",
     "HPKnQa6Dv4k"
-]
+];