Play inline again - faststart remux makes the embedded player work

index.html

@@ -28,20 +28,18 @@
   h3{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}
   .quote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 22px;
     color:var(--ink);font-size:17px}
-  .play{display:inline-flex;align-items:center;gap:13px;text-decoration:none;
+  .demo{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:40px;align-items:start}
-    background:var(--accent);color:#fff;font-weight:650;font-size:16.5px;
+  @media(max-width:740px){.demo{grid-template-columns:1fr}}
-    padding:15px 26px;border-radius:11px;border:1px solid #6ba0ff;
+  .player{width:100%;aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line);
-    transition:filter .15s ease}
+    background:#000;display:block}
-  .play:hover{filter:brightness(1.1)}
+  .cap{font:12.5px/1.6 var(--mono);color:var(--muted);margin-top:12px}
-  .play svg{flex:0 0 auto}
-  .cap{font:12.5px/1.6 var(--mono);color:var(--muted);margin-top:14px}
   .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
   .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
   .card .n{font:600 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:10px}
   .card p{margin:0;color:var(--muted);font-size:15px}
-  table{width:100%;border-collapse:collapse;font-size:15px;max-width:520px}
+  table{width:100%;border-collapse:collapse;font-size:15px}
   th,td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
-  th{color:var(--muted);font-weight:600;width:42%;font-size:14px}
+  th{color:var(--muted);font-weight:600;width:44%;font-size:14px}
   .k{font-family:var(--mono);font-size:13.5px;color:var(--accent2)}
   ul{margin:0;padding-left:20px;color:var(--muted)}
   li{margin-bottom:9px}
@@ -62,23 +60,27 @@
 
   <section>
     <h2>The clip</h2>
-    <h3>Butcher, on humanoid robots</h3>
+    <div class="demo">
-    <p class="quote">&ldquo;That robot is going to be the best-selling product of all time. Every house gets one.&rdquo;</p>
+      <div>
-    <p style="color:var(--muted);max-width:64ch;margin:0 0 26px">A bulldog in a podcast booth, mid-argument on a video call. The audio, the mouth movement and the room were all produced in a single generation from a text prompt — no reference photo, and no separate lip-sync pass.</p>
+        <video class="player" controls playsinline preload="metadata"
-
+          src="https://api.corben.world/files/414f2b88-6a88-41bc-8a9e-f41ee528139a/public">
-    <a class="play" href="https://api.corben.world/files/414f2b88-6a88-41bc-8a9e-f41ee528139a/public" target="_blank" rel="noopener">
+          Your browser cannot play this video.
-      <svg width="19" height="22" viewBox="0 0 19 22" fill="none" aria-hidden="true"><path d="M18 11L0 21.4V0.6L18 11Z" fill="currentColor"/></svg>
+        </video>
-      Watch the clip
+        <p class="cap">720&times;1280 &middot; 8s &middot; h264 + AAC &middot; 24fps &middot; 3.3&nbsp;MB</p>
-    </a>
+      </div>
-    <p class="cap">720&times;1280 &middot; 8s &middot; h264 + AAC &middot; 24fps &middot; 3.3&nbsp;MB &middot; opens in a new tab</p>
+      <div>
-
+        <h3>Butcher, on humanoid robots</h3>
-    <table style="margin-top:34px">
+        <p class="quote">&ldquo;That robot is going to be the best-selling product of all time. Every house gets one.&rdquo;</p>
-      <tr><th>Model</th><td><span class="k">google/veo-3.1-lite</span></td></tr>
+        <p style="color:var(--muted);margin:0 0 22px">A bulldog in a podcast booth, mid-argument on a video call. The audio, the mouth movement and the room were all produced in a single generation from a text prompt — no reference photo, and no separate lip-sync pass.</p>
-      <tr><th>Route</th><td>OpenRouter video API</td></tr>
+        <table>
-      <tr><th>Mode</th><td>Text-to-video, native audio</td></tr>
+          <tr><th>Model</th><td><span class="k">google/veo-3.1-lite</span></td></tr>
-      <tr><th>Generation time</th><td>62 seconds</td></tr>
+          <tr><th>Route</th><td>OpenRouter video API</td></tr>
-      <tr><th>List price</th><td>$0.05 / second at 720p</td></tr>
+          <tr><th>Mode</th><td>Text-to-video, native audio</td></tr>
-    </table>
+          <tr><th>Generation time</th><td>62 seconds</td></tr>
+          <tr><th>List price</th><td>$0.05 / second at 720p</td></tr>
+        </table>
+      </div>
+    </div>
   </section>
 
   <section>
@@ -98,7 +100,7 @@
       <li><b>Describing the breed matters more than image quality.</b> A full-resolution character plate was reconstructed faithfully from a 150&times;150 thumbnail once the coat and markings were named in words.</li>
       <li><b>Every line is verified, not assumed.</b> Generated audio is transcribed back with Whisper and checked against the script before a clip is accepted.</li>
       <li><b>Each shot gets a clean context.</b> Generating several clips in one conversation caused dialogue to bleed between characters — one had another&rsquo;s line appended to its own.</li>
-      <li><b>Video needs remuxing before it will stream.</b> Model output puts the <span class="k">moov</span> index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front.</li>
+      <li><b>Video needs remuxing before it will play in a page.</b> Model output puts the <span class="k">moov</span> index at the end of the file, so a browser shows a blank player until the whole thing downloads. A lossless faststart pass moves it to the front and the clip plays immediately.</li>
       <li><b>Captions are burned in afterwards, not generated.</b> Video models render text unreliably; an overlay pass gives identical typography across every clip and costs nothing to restyle.</li>
     </ul>
   </section>