From 1fe0d34af513aa11844c0c6b09f6bdf28716b5a6 Mon Sep 17 00:00:00 2001
From: khushalsonawat <khushalsonawat@gmail.com>
Date: Thu, 25 Jun 2026 21:24:37 +0530
Subject: [PATCH] docs(command-center): autoplay the overview video on #watch
 links

- Add id + data-embed to the overview iframe and a small handler so /docs/command-center#watch autoplays the muted video and scrolls to it (for email/campaign traffic)
- Normal visitors keep click-to-play
---
 src/pages/docs/command-center/index.mdx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/docs/command-center/index.mdx b/src/pages/docs/command-center/index.mdx
index 0b7a345d..ace12580 100644
--- a/src/pages/docs/command-center/index.mdx
+++ b/src/pages/docs/command-center/index.mdx
@@ -7,10 +7,26 @@ description: "A unified API gateway for 100+ LLM providers with built-in guardra
 The `prism-ai` Python package and `@futureagi/prism` TypeScript package are being renamed. The current packages will continue to work but are deprecated. Watch for the updated package names in an upcoming release.
 </Warning>
 
-<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, margin: '1.5rem 0 2rem', borderRadius: '12px', overflow: 'hidden' }}>
-  <iframe src="https://www.youtube-nocookie.com/embed/Xr2RmZAVcoo?rel=0&modestbranding=1&playsinline=1" title="Agent Command Center overview" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }} allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
+<div id="acc-overview-video-wrap" style={{ position: 'relative', paddingBottom: '56.25%', height: 0, margin: '1.5rem 0 2rem', borderRadius: '12px', overflow: 'hidden' }}>
+  <iframe id="acc-overview-video" data-embed="https://www.youtube-nocookie.com/embed/Xr2RmZAVcoo?rel=0&modestbranding=1&playsinline=1" src="https://www.youtube-nocookie.com/embed/Xr2RmZAVcoo?rel=0&modestbranding=1&playsinline=1" title="Agent Command Center overview" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
 </div>
 
+<script>{`
+(function(){
+  function playAccVideoFromLink(){
+    if (location.hash !== '#watch') return;
+    var f = document.getElementById('acc-overview-video');
+    if (!f) return;
+    var base = f.getAttribute('data-embed');
+    if (base && f.src.indexOf('autoplay=1') === -1) { f.src = base + '&autoplay=1&mute=1'; }
+    var wrap = document.getElementById('acc-overview-video-wrap') || f;
+    if (wrap.scrollIntoView) wrap.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+  playAccVideoFromLink();
+  document.addEventListener('astro:page-load', playAccVideoFromLink);
+})();
+`}</script>
+
 ## About
 
 Agent Command Center is Future AGI's AI Gateway. It sits between your application and LLM providers, giving you a single API that handles routing across 100+ providers, safety guardrails, response caching, cost tracking, and full observability.