[pull] main from tldraw:main

apps/docs/content/sdk-features/default-shapes.mdx

@@ -324,6 +324,12 @@ const ConfiguredVideoUtil = VideoShapeUtil.configure({
 })
 ```
 
+To disable autoplay across the board — including for pasted or restored shapes — set the editor-level `allowVideoAutoplay` option to `false` instead:
+
+```tsx
+<Tldraw options={{ allowVideoAutoplay: false }} />
+```
+
 ### Bookmark
 
 The bookmark shape displays a URL as a card with metadata including title, description, and preview image. Bookmarks are created when you paste URLs onto the canvas. The editor fetches metadata from the URL and stores it in an associated asset record. Bookmark shapes have fixed dimensions and can't be resized.

apps/docs/content/sdk-features/options.mdx

@@ -201,6 +201,7 @@ When `debouncedZoom` is enabled and the page has more shapes than `debouncedZoom
 | `laserDelayMs`                   | 1200      | Duration laser pointer remains visible         |
 | `laserFadeoutMs`                 | 500       | Duration for laser pointer fadeout animation   |
 | `quickZoomPreservesScreenBounds` | true      | Whether quick zoom brush keeps viewport scale  |
+| `allowVideoAutoplay`             | true      | Whether video shapes are allowed to autoplay   |
 | `branding`                       | undefined | App name for accessibility labels              |
 | `nonce`                          | undefined | CSP nonce for inline styles                    |
 

packages/editor/api-report.api.md

@@ -718,6 +718,7 @@ export const DefaultSvgDefs: () => null;
 export const defaultTldrawOptions: {
     readonly actionShortcutsLocation: "swap";
     readonly adjacentShapeMargin: 10;
+    readonly allowVideoAutoplay: true;
     readonly animationMediumMs: 320;
     readonly camera: TLCameraOptions;
     readonly cameraMovingTimeoutMs: 64;
@@ -3754,6 +3755,7 @@ export interface TldrawOptions {
     readonly actionShortcutsLocation: 'menu' | 'swap' | 'toolbar';
     // (undocumented)
     readonly adjacentShapeMargin: number;
+    readonly allowVideoAutoplay: boolean;
     // (undocumented)
     readonly animationMediumMs: number;
     readonly branding?: string;

packages/editor/src/lib/options.ts

@@ -209,6 +209,17 @@ export interface TldrawOptions {
 	 * viewport's page dimensions regardless of overview zoom changes.
 	 */
 	readonly quickZoomPreservesScreenBounds: boolean
+	/**
+	 * Whether video shapes are allowed to autoplay. When `true` (the default), each
+	 * video respects its own `shape.props.autoplay` value. When `false`, no video
+	 * autoplays regardless of its shape prop — useful for host apps that want to
+	 * disable autoplay across the board, including for pasted or restored shapes.
+	 *
+	 * This does not change the per-shape `autoplay` prop on new video shapes — that
+	 * default is controlled by `VideoShapeOptions.autoplay` on `VideoShapeUtil`. The
+	 * `prefers-reduced-motion` media query continues to suppress autoplay independently.
+	 */
+	readonly allowVideoAutoplay: boolean
 	/**
 	 * Called before content is written to the clipboard during a copy or cut operation.
 	 * Receives the serialized content (shapes, bindings, assets) and can filter or transform
@@ -347,6 +358,7 @@ export const defaultTldrawOptions = {
 	text: {},
 	deepLinks: undefined,
 	quickZoomPreservesScreenBounds: true,
+	allowVideoAutoplay: true,
 	onBeforeCopyToClipboard: undefined,
 	onBeforePasteFromClipboard: undefined,
 	onClipboardPasteRaw: undefined,

packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -210,7 +210,11 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 									height="100%"
 									draggable={false}
 									playsInline
-									autoPlay={shape.props.autoplay && !prefersReducedMotion}
+									autoPlay={
+										shape.props.autoplay &&
+										editor.options.allowVideoAutoplay &&
+										!prefersReducedMotion
+									}
 									muted
 									loop
 									disableRemotePlayback