put the YouTube intro video back in place of the 43 second demo video

README.md

@@ -24,8 +24,8 @@ Joltrin (formerly SOP) is an open-source Go library that checks an AI agent's ac
 **What Joltrin does.** The agent emits intent. Joltrin checks the intent against the trace and the runbook's rules, outside the agent's context window. The check and the commit are one call, so a step is recorded only if it passed. A step whose required state is missing is refused. A claim that something happened is not evidence that it happened.
 
 <p align="center">
-  <a href="docs/assets/joltrin-barrier.mp4">
-    <img src="docs/assets/joltrin-barrier-poster.jpg" alt="A 43 second silent demo: an agent proposes dropping a production database, Joltrin blocks it, the agent runs the missing steps, and the same action is then allowed. Click to play." width="420" />
+  <a href="https://youtu.be/F0jYkBHJluI">
+    <img src="docs/assets/joltrin-demo.gif" alt="Joltrin demo. Click to watch the video." width="760" />
   </a>
 </p>
 

demo/index.html

@@ -477,29 +477,29 @@ <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-t
           </div>
         </div>
 
-        <figure id="demo-video" class="min-w-0 scroll-mt-20 w-full max-w-[34rem] mx-auto lg:mx-0 lg:ml-auto">
-          <div class="relative rounded-2xl overflow-hidden border border-dark-700 bg-dark-950 shadow-2xl shadow-black/50" style="aspect-ratio:1/1">
-            <video id="demo-video-el" class="absolute inset-0 w-full h-full" width="1080" height="1080" muted loop playsinline preload="none"
-                   poster="./assets/joltrin-barrier-poster-540.jpg"
-                   aria-label="A 43 second demo: an agent proposes dropping a production database, Joltrin blocks it, the agent runs the missing steps, and the same action is then allowed."></video>
-            <button id="demo-video-toggle" type="button" aria-label="Play the demo video"
-                    class="absolute right-3 bottom-3 inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-950/85 border border-dark-700 text-xs font-mono text-slate-200 hover:text-white hover:border-brand-500/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400">
-              <span id="demo-video-icon" aria-hidden="true">&#9654;</span><span id="demo-video-label">Play</span>
-            </button>
+        <div id="hero-example" class="min-w-0 rounded-xl bg-dark-950 border border-dark-700 p-4 font-mono text-xs sm:text-sm" aria-label="A blocked, then allowed, sequence">
+          <div class="text-[11px] text-slate-500 uppercase tracking-wider mb-3">// db-maintenance runbook</div>
+          <div class="space-y-1.5 overflow-x-auto">
+            <div class="sm:whitespace-nowrap"><span class="text-white">drop_prod_db</span>     <span class="text-rose-400 font-bold">BLOCKED</span> <span class="text-slate-400">backup_validated missing</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">validate_backup</span>  <span class="text-rose-400 font-bold">BLOCKED</span> <span class="text-slate-400">backup_taken missing</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">take_backup</span>      <span class="text-brand-400 font-bold">ALLOWED</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">validate_backup</span>  <span class="text-brand-400 font-bold">ALLOWED</span></div>
+            <div class="sm:whitespace-nowrap"><span class="text-white">drop_prod_db</span>     <span class="text-brand-400 font-bold">ALLOWED</span></div>
           </div>
-          <figcaption class="mt-3 text-xs text-slate-400 leading-relaxed">
-            43 seconds, silent, real output from <code class="text-slate-200">sop-mcp-server demo</code>.
-            <details class="mt-2">
-              <summary class="cursor-pointer text-slate-300 hover:text-white">Text version</summary>
-              <ol id="hero-example" class="mt-2 space-y-1 font-mono text-[12px] text-slate-300 list-decimal list-inside">
-                <li><span class="text-white">drop_prod_db</span> <span class="text-rose-400 font-bold">BLOCKED</span>, <code>backup_validated</code> is missing from the trace</li>
-                <li><span class="text-white">take_backup</span> <span class="text-brand-400 font-bold">ALLOWED</span></li>
-                <li><span class="text-white">validate_backup</span> <span class="text-brand-400 font-bold">ALLOWED</span></li>
-                <li><span class="text-white">drop_prod_db</span> <span class="text-brand-400 font-bold">ALLOWED</span>, the evidence now exists</li>
-              </ol>
-            </details>
-          </figcaption>
-        </figure>
+          <p class="text-[11px] text-slate-500 mt-3 leading-relaxed font-sans">The order is enforced by the barrier, whatever the agent says it already did.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Intro video (muted so browsers allow autoplay) -->
+    <section id="demo-video" aria-label="Joltrin intro video" class="scroll-mt-20 mb-8 rounded-2xl overflow-hidden border border-dark-700/80 bg-dark-900">
+      <div class="relative w-full" style="aspect-ratio:16/9">
+        <iframe class="absolute inset-0 w-full h-full"
+          data-src="https://www.youtube-nocookie.com/embed/F0jYkBHJluI?autoplay=1&mute=1&loop=1&playlist=F0jYkBHJluI&playsinline=1&rel=0"
+          title="Joltrin intro video"
+          allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+          allowfullscreen
+          referrerpolicy="strict-origin-when-cross-origin"></iframe>
       </div>
     </section>
 
@@ -1763,39 +1763,12 @@ <h4 class="font-mono text-xs uppercase font-bold text-white mb-3">Open Source &a
   <script>
     let selectedBenchOps = 5000;
 
-    // Demo video. It stays unloaded until the page has finished loading, plays
-    // only while it is on screen, and does not autoplay for people who prefer
-    // reduced motion, who get the poster and a Play button instead. A phone gets
-    // the smaller file.
-    (function () {
-      const v = document.getElementById('demo-video-el');
-      const btn = document.getElementById('demo-video-toggle');
-      if (!v || !btn) return;
-      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-      const conn = navigator.connection || {};
-      const small = window.innerWidth <= 700 || conn.saveData;
-      const src = small ? './assets/joltrin-barrier-720.mp4' : './assets/joltrin-barrier.mp4';
-      let userPaused = false;
-      const label = (playing) => {
-        document.getElementById('demo-video-label').textContent = playing ? 'Pause' : 'Play';
-        document.getElementById('demo-video-icon').innerHTML = playing ? '&#10074;&#10074;' : '&#9654;';
-        btn.setAttribute('aria-label', playing ? 'Pause the demo video' : 'Play the demo video');
-      };
-      const play = () => { if (!v.getAttribute('src')) v.src = src; return v.play().catch(() => {}); };
-      v.addEventListener('play', () => label(true));
-      v.addEventListener('pause', () => label(false));
-      btn.addEventListener('click', () => {
-        if (v.paused) { userPaused = false; play(); } else { userPaused = true; v.pause(); }
-      });
-      if (reduce || !('IntersectionObserver' in window)) return;
-      window.addEventListener('load', () => {
-        new IntersectionObserver((entries) => {
-          entries.forEach((e) => {
-            if (e.isIntersecting) { if (!userPaused) play(); } else { v.pause(); }
-          });
-        }, { threshold: 0.4 }).observe(v);
-      });
-    })();
+    // The intro video player is about 5 MB of scripts. It starts after the page
+    // has loaded, so it never delays the first paint or the load event.
+    window.addEventListener("load", () => {
+      const frame = document.querySelector('#demo-video iframe[data-src]');
+      if (frame) frame.src = frame.dataset.src;
+    });
 
     // Initialize Lucide Icons
     document.addEventListener("DOMContentLoaded", () => {