GameJam: Galerie-iframes laden wieder sofort, aber ohne Auto-Ton

Klick-Platzhalter zurückgenommen. Stattdessen am iframe
allow="autoplay 'none'" gesetzt: das Spiel lädt sichtbar, der Browser
blockiert automatischen Ton (auch via AudioContext). Erst eine
User-Geste im Spiel (Reinklicken) erlaubt den Ton.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/gamejam.html

@@ -298,16 +298,6 @@
   .games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 6px; }
   .game { background: var(--panel); border: 1px solid var(--line); }
   .game .frame { width: 100%; aspect-ratio: 16/10; border: none; background: var(--panel2); display: block; }
-  /* Klick-zum-Starten-Platzhalter: Spiel (und Ton) lädt erst beim Klick. */
-  .game .frame-idle {
-    width: 100%; aspect-ratio: 16/10; border: none; background: var(--panel2);
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 10px; cursor: pointer; color: var(--ac);
-    font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 1px;
-    text-transform: uppercase; transition: background .15s;
-  }
-  .game .frame-idle:hover { background: var(--panel); }
-  .game .frame-idle svg.ic { width: 34px; height: 34px; }
   .game .gm {
     padding: 15px 17px; display: flex; justify-content: space-between;
     align-items: center; gap: 12px; border-top: 1px solid var(--line);
@@ -748,10 +738,8 @@ async function loadGallery() {
     const who = escapeHtml(g.teilnehmer || g.team || "");
     gallery.insertAdjacentHTML("beforeend", `
       <div class="game">
-        <button class="frame-idle" type="button" data-url="${url}" aria-label="${name}">
-          <svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M10 8l6 4-6 4z"/></svg>
-          <span>Spiel starten</span>
-        </button>
+        <iframe class="frame" src="${url}" sandbox="allow-scripts allow-pointer-lock"
+                allow="autoplay 'none'" loading="lazy" title="${name}"></iframe>
         <div class="gm">
           <div><div class="gt">${name}</div><div class="gte">${who}</div></div>
           <a href="${url}" target="_blank" rel="noopener">Spielen
@@ -760,19 +748,6 @@ async function loadGallery() {
       </div>`);
   }
 }
-
-/* Spiel erst beim Klick laden — dann startet auch erst der Ton. */
-gallery.addEventListener("click", (e) => {
-  const idle = e.target.closest(".frame-idle");
-  if (!idle) return;
-  const iframe = document.createElement("iframe");
-  iframe.className = "frame";
-  iframe.src = idle.getAttribute("data-url") || "";
-  iframe.setAttribute("sandbox", "allow-scripts allow-pointer-lock");
-  iframe.setAttribute("title", idle.getAttribute("aria-label") || "Spiel");
-  idle.replaceWith(iframe);
-});
-
 loadGallery();
 document.getElementById("refreshBtn").addEventListener("click", loadGallery);
 </script>