fix: video autoplay for Safari and Chrome with instant navigation (#84)

docs/commands.md

@@ -43,7 +43,7 @@ cf --help, -h       # Show help
 Make reality match your configuration. The primary reconciliation command.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/apply.webm#t=0.001" type="video/webm">
+  <source src="/assets/apply.webm" type="video/webm">
 </video>
 
 ```bash
@@ -187,7 +187,7 @@ cf restart --all
 Update stacks (pull + build + down + up).
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/update.webm#t=0.001" type="video/webm">
+  <source src="/assets/update.webm" type="video/webm">
 </video>
 
 ```bash
@@ -275,7 +275,7 @@ cf ps --host nuc
 Show stack logs.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/logs.webm#t=0.001" type="video/webm">
+  <source src="/assets/logs.webm" type="video/webm">
 </video>
 
 ```bash

docs/getting-started.md

@@ -18,7 +18,7 @@ Before you begin, ensure you have:
 ## Installation
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/install.webm#t=0.001" type="video/webm">
+  <source src="/assets/install.webm" type="video/webm">
 </video>
 
 ### One-liner (recommended)

docs/index.md

@@ -17,12 +17,12 @@ It also works great on a single host with one folder per stack; just map stacks
 
 **CLI:**
 <video autoplay loop muted playsinline>
-  <source src="/assets/quickstart.webm#t=0.001" type="video/webm">
+  <source src="/assets/quickstart.webm" type="video/webm">
 </video>
 
 **[Web UI](web-ui.md):**
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-workflow.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-workflow.webm" type="video/webm">
 </video>
 
 ## Why Compose Farm?
@@ -136,7 +136,7 @@ cf logs -f plex
 - **Auto-migration**: Change a host assignment, run `cf up`, stack moves automatically
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/migration.webm#t=0.001" type="video/webm">
+  <source src="/assets/migration.webm" type="video/webm">
 </video>
 - **Parallel execution**: Multiple stacks start/stop concurrently
 - **State tracking**: Knows which stacks are running where

docs/javascripts/video-fix.js

@@ -0,0 +1,21 @@
+// Fix Safari video autoplay issues
+(function() {
+  function initVideos() {
+    document.querySelectorAll('video[autoplay]').forEach(function(video) {
+      video.load();
+      video.play().catch(function() {});
+    });
+  }
+
+  // For initial page load (needed for Chrome)
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initVideos);
+  } else {
+    initVideos();
+  }
+
+  // For MkDocs instant navigation (needed for Safari)
+  if (typeof document$ !== 'undefined') {
+    document$.subscribe(initVideos);
+  }
+})();

docs/web-ui.md

@@ -19,7 +19,7 @@ Then open [http://localhost:8000](http://localhost:8000).
 Console terminal, config editor, stack navigation, actions (up, logs, update), dashboard overview, and theme switching - all in one flow.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-workflow.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-workflow.webm" type="video/webm">
 </video>
 
 ### Stack Actions
@@ -27,7 +27,7 @@ Console terminal, config editor, stack navigation, actions (up, logs, update), d
 Navigate to any stack and use the command palette to trigger actions like restart, pull, update, or view logs. Output streams in real-time via WebSocket.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-stack.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-stack.webm" type="video/webm">
 </video>
 
 ### Theme Switching
@@ -35,7 +35,7 @@ Navigate to any stack and use the command palette to trigger actions like restar
 35 themes available via the command palette. Type `theme:` to filter, then use arrow keys to preview themes live before selecting.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-themes.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-themes.webm" type="video/webm">
 </video>
 
 ### Command Palette
@@ -43,7 +43,7 @@ Navigate to any stack and use the command palette to trigger actions like restar
 Press `Ctrl+K` (or `Cmd+K` on macOS) to open the command palette. Use fuzzy search to quickly navigate, trigger actions, or change themes.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-navigation.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-navigation.webm" type="video/webm">
 </video>
 
 ## Pages
@@ -70,7 +70,7 @@ Press `Ctrl+K` (or `Cmd+K` on macOS) to open the command palette. Use fuzzy sear
 - Monaco editor with syntax highlighting
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-console.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-console.webm" type="video/webm">
 </video>
 
 ### Container Shell
@@ -78,7 +78,7 @@ Press `Ctrl+K` (or `Cmd+K` on macOS) to open the command palette. Use fuzzy sear
 Click the Shell button on any running container to exec into it directly from the browser.
 
 <video autoplay loop muted playsinline>
-  <source src="/assets/web-shell.webm#t=0.001" type="video/webm">
+  <source src="/assets/web-shell.webm" type="video/webm">
 </video>
 
 ## Keyboard Shortcuts

zensical.toml

@@ -11,6 +11,7 @@ copyright = "Copyright © 2025 Bas Nijholt"
 repo_url = "https://github.com/basnijholt/compose-farm"
 repo_name = "GitHub"
 edit_uri = "edit/main/docs"
+extra_javascript = ["javascripts/video-fix.js"]
 
 nav = [
   { "Home" = "index.md" },