@videojs/html 10.3.0 → 10.4.0

package/dist/default/internal/skins/scaffold-video/skin.css

@@ -955,6 +955,12 @@
     flex-shrink: 0;
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-settings-button {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-settings-button-label {
     clip-path: inset(50%);
     white-space: nowrap;
@@ -1231,6 +1237,12 @@
     display: block;
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-captions-button {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) :where(.media-captions-button)[data-active] .media-captions-button-off-icon, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-captions-button-on-icon {
     display: none;
   }
@@ -1445,7 +1457,7 @@
     pointer-events: auto;
     align-items: center;
     gap: calc(var(--media-spacing) * 2);
-    display: none;
+    display: flex;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -1479,25 +1491,47 @@
     }
   }
 
-  @container media-root (width >= 22.5rem) {
-    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center {
-      display: flex;
-    }
-  }
-
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button {
-    background-color: var(--media-background) !important;
+    background-color: var(--media-popover) !important;
     margin: 0 !important;
   }
 
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button {
+      background-color: color-mix(in oklab, var(--media-popover) 40%, transparent) !important;
+    }
+  }
+
   @media (hover: hover) {
     :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button:hover {
-      background-color: var(--media-button-highlight) !important;
+      background-color: var(--media-popover) !important;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button:hover {
+        background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+      }
+    }
+  }
+
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button:focus-visible {
+    background-color: var(--media-popover) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button:focus-visible {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
     }
   }
 
-  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button:focus-visible, :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button[aria-expanded="true"] {
-    background-color: var(--media-button-highlight) !important;
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button[aria-expanded="true"] {
+    background-color: var(--media-popover) !important;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-button[aria-expanded="true"] {
+      background-color: color-mix(in oklab, var(--media-popover) 60%, transparent) !important;
+    }
   }
 
   @media (forced-colors: active) {
@@ -1537,11 +1571,25 @@
     height: calc(var(--media-spacing) * 14.5) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-play {
+      width: calc(var(--media-spacing) * 11) !important;
+      height: calc(var(--media-spacing) * 11) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-play-icon {
     width: calc(var(--media-spacing) * 7) !important;
     height: calc(var(--media-spacing) * 7) !important;
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-play-icon {
+      width: calc(var(--media-spacing) * 5.5) !important;
+      height: calc(var(--media-spacing) * 5.5) !important;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-content {
     pointer-events: none;
     z-index: 30;
@@ -1586,6 +1634,10 @@
     top: 0;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-top:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-content):not([data-visible]) .video-controls-top {
     pointer-events: none;
     opacity: 0;
@@ -1613,6 +1665,10 @@
     }
   }
 
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-content):not([data-started]) .video-controls-video-bottom {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   @media (forced-colors: active) {
     :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-video-bottom {
       inset-inline: 0;
@@ -1796,6 +1852,12 @@
     }
   }
 
+  @container media-root (width < 15rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .media-title {
+      display: none;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-backdrop {
     pointer-events: none;
     background-image: linear-gradient(to top, #00000080, #0000 40% 60%, #0006);
@@ -1803,6 +1865,10 @@
     inset: 0;
   }
 
+  :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-backdrop:not([data-started]) {
+    visibility: var(--media-controls-before-start, hidden);
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-backdrop:not([data-visible]) {
     display: none;
   }
@@ -1819,12 +1885,22 @@
     height: calc(var(--media-spacing) * 8) !important;
   }
 
+  :where(:where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-content):not([data-started]) .video-controls-center-seek {
+    display: none !important;
+  }
+
   @media (pointer: fine) {
     :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-seek {
       display: grid;
     }
   }
 
+  @container media-root (width < 22.5rem) {
+    :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-seek {
+      display: none !important;
+    }
+  }
+
   :where(.media-skin[data-theme="scaffold"][data-preset="video"]) .video-controls-center-seek-icon {
     width: calc(var(--media-spacing) * 4.5);
     height: calc(var(--media-spacing) * 4.5);
@@ -1874,29 +1950,29 @@
 
 @layer base.theme {
   .media-skin {
-    --media-background: oklch(0% 0 0);
-    --media-foreground: oklch(100% 0 0);
-    --media-controls: oklch(0% 0 0 / .35);
+    --media-background: #000;
+    --media-foreground: #fff;
+    --media-controls: #00000059;
     --media-controls-foreground: var(--media-foreground);
-    --media-popover: oklch(100% 0 0 / .1);
+    --media-popover: #ffffff1a;
     --media-popover-foreground: var(--media-foreground);
     --media-primary: var(--media-accent-color, var(--media-default-accent-color));
     --media-primary-foreground: var(--media-accent-text-color, var(--media-default-accent-text-color));
-    --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+    --media-accent: var(--media-accent-color, #ffffff1a);
     --media-accent-foreground: var(--media-accent-text-color, currentColor);
-    --media-muted: oklch(100% 0 0 / .15);
-    --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
-    --media-border: oklch(0% 0 0 / .1);
-    --media-ring: oklch(100% 0 0);
-    --media-backdrop: oklch(0% 0 0);
-    --media-live-color: oklch(65% .22 27);
-    --media-shadow-surface: 0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15);
+    --media-muted: #ffffff26;
+    --media-muted-foreground: #ffffffa6;
+    --media-border: #0000001a;
+    --media-ring: #fff;
+    --media-backdrop: #000;
+    --media-live-color: #f9423d;
+    --media-shadow-surface: 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026;
     --media-shadow-surface-inset: inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d;
     --media-shadow-thumb: 0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059;
     --media-shadow-tooltip: 0 0 0 1px var(--media-border), var(--media-shadow-surface);
-    --media-shadow-separator: 0 1px 0 0 oklch(100% 0 0 / .075);
+    --media-shadow-separator: 0 1px 0 0 #ffffff13;
     --media-shadow-current-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15));
-    --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+    --media-shadow-subtle-current-color: transparent;
     --media-text-shadow-dialog: 0 1px 0 #00000040;
     --media-backdrop-filter-surface: blur(16px) saturate(125%);
     --media-backdrop-filter-indicator: blur(8px);
@@ -1905,8 +1981,8 @@
     --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
-    --media-default-accent-color: oklch(100% 0 0);
-    --media-default-accent-text-color: oklch(0% 0 0);
+    --media-default-accent-color: #fff;
+    --media-default-accent-text-color: #000;
     --media-duration-instant: 50ms;
     --media-duration-fast: .1s;
     --media-duration: .15s;
@@ -1943,16 +2019,31 @@
     --media-slider-preview-label-offset: calc(var(--media-spacing) * 10.5);
     --media-video-border-radius: var(--media-border-radius, 28px);
     --media-scale: 1;
-    --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    --media-scrollbar-thumb-color: #80808080;
     --media-spacing: calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4);
     scrollbar-color: var(--media-scrollbar-thumb-color) transparent;
     scrollbar-width: thin;
   }
 
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin {
+      --media-accent: var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent));
+      --media-muted-foreground: color-mix(in oklab, var(--media-foreground) 65%, transparent);
+      --media-shadow-subtle-current-color: color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent);
+      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 30%, transparent);
+    }
+  }
+
+  @supports (color: oklch(0 0 0)) {
+    .media-skin {
+      --media-live-color: oklch(65% .22 27);
+    }
+  }
+
   @supports (color: contrast-color(red)) {
     .media-skin {
       --media-primary-foreground: var(--media-accent-text-color, contrast-color(var(--media-primary)));
-      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))));
+      --media-accent-foreground: var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, #000))));
     }
   }
 
@@ -2002,24 +2093,48 @@
     --media-frame-border: var(--media-border-color, #0000001a);
     --media-controls-gradient-height: max(40%, calc(var(--media-spacing) * 40));
     --media-controls-bottom-gradient-height: max(50%, calc(var(--media-spacing) * 60));
-    --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 60%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
-      color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
-      color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
-      transparent);
-    --media-controls-top-gradient: linear-gradient(to bottom,
-      color-mix(in oklab, var(--media-backdrop) 55%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
-      color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
-      color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
-      transparent);
     --media-caption-controls-y: calc(var(--media-spacing) * -16);
     --media-slider-preview-offset: calc(var(--media-spacing) * 9);
-    --media-thumbnail-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 10%, transparent),
-      transparent);
+  }
+
+  @supports (color: color-mix(in oklab, red, red)) {
+    .media-skin:is([data-preset="video"], [data-preset="live-video"]) {
+      --media-controls-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 60%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 50.7%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 30%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 9.3%, transparent) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 55%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 46.48%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 27.5%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 8.53%, transparent) 75%,
+        transparent);
+      --media-thumbnail-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 10%, transparent),
+        transparent);
+    }
+
+    .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
+      --media-controls-gradient: linear-gradient(to top,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+        transparent);
+      --media-controls-top-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 50%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
+        color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
+        color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
+        transparent);
+      --media-indicator-gradient: linear-gradient(to bottom,
+        color-mix(in oklab, var(--media-backdrop) 35%, transparent),
+        color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
+        transparent);
+    }
   }
 
   @supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) {
@@ -2051,23 +2166,7 @@
   .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"] {
     --media-frame-border: var(--media-border-color, #00000026);
     --media-controls-gradient-height: 40%;
-    --media-controls-bottom-gradient-height: 40%;
-    --media-controls-gradient: linear-gradient(to top,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
-      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
-      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
-      transparent);
-    --media-controls-top-gradient: linear-gradient(to bottom,
-      color-mix(in oklab, var(--media-backdrop) 50%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 42.2%, transparent) 25%,
-      color-mix(in oklab, var(--media-backdrop) 25%, transparent) 50%,
-      color-mix(in oklab, var(--media-backdrop) 7.8%, transparent) 75%,
-      transparent);
-    --media-indicator-gradient: linear-gradient(to bottom,
-      color-mix(in oklab, var(--media-backdrop) 35%, transparent),
-      color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12),
-      transparent);
+    --media-controls-bottom-gradient-height: max(40%, calc(var(--media-spacing) * 44));
     --media-caption-controls-y: calc(var(--media-spacing) * -14);
     --media-slider-preview-offset: calc(var(--media-spacing) * 11);
   }
@@ -2225,7 +2324,7 @@
   @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
     .media-skin {
       --media-popover: var(--media-background);
-      --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      --media-scrollbar-thumb-color: currentColor;
       --media-backdrop-filter-surface: none;
       --media-backdrop-filter-indicator: none;
       --media-backdrop-filter-dialog: none;
@@ -2233,6 +2332,12 @@
       scrollbar-width: auto;
     }
 
+    @supports (color: color-mix(in oklab, red, red)) {
+      .media-skin {
+        --media-scrollbar-thumb-color: color-mix(in oklab, currentColor 80%, transparent);
+      }
+    }
+
     @supports (color: oklch(from currentColor l c h)) {
       .media-skin {
         --media-scrollbar-thumb-color: oklch(from currentColor l c h / .8);

package/dist/default/internal/skins/scaffold-video/template.js

@@ -222,7 +222,7 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-tooltip-shortcut class="media-tooltip-shortcut">
 </media-tooltip-shortcut>
 </media-tooltip>
-<button commandfor="vjs-dexOLs_f-h-popup" class="media-button" id="vjs-HNl1fwKe-0-11-trigger">
+<button commandfor="vjs-dexOLs_f-h-popup" class="media-button media-settings-button" id="vjs-HNl1fwKe-0-11-trigger">
 <media-icon family="scaffold" name="gear" class="media-button-icon">
 </media-icon>
 <media-text class="media-settings-button-label" token="menu.settings">Settings</media-text>
@@ -358,6 +358,8 @@ const template = createTemplate(`<media-container class="media-skin media-contai
 <media-menu-radio-item class="media-menu-radio-item">
 <span data-part="label">
 </span>
+<span data-part="badge" class="media-menu-badge">
+</span>
 <media-menu-item-indicator force-mount class="media-menu-indicator">
 <media-icon family="scaffold" name="check" class="media-menu-radio-icon">
 </media-icon>

package/dist/default/media/background-video/adapter.js

@@ -1,46 +1,24 @@
-import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
-import { getTemplateHTML } from "./template.js";
-import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { BackgroundVideoBase } from "./base.js";
 //#region src/media/background-video/adapter.ts
-const HTMLElementBase = globalThis.HTMLElement ?? class {};
-var BackgroundVideo = class extends MediaAttachMixin(HTMLElementBase) {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	static get observedAttributes() {
-		return ["src"];
-	}
+var BackgroundVideo = class extends BackgroundVideoBase {
 	constructor() {
 		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = {
-				...namedNodeMapToObject(this.attributes),
-				...!this.hasAttribute("nomuted") && { muted: "" },
-				...!this.hasAttribute("noloop") && { loop: "" },
-				...!this.hasAttribute("noautoplay") && { autoplay: "" },
-				playsinline: "",
-				disableremoteplayback: "",
-				disablepictureinpicture: ""
-			};
-			this.shadowRoot.innerHTML = getTemplateHTML(attrs);
-		}
-		this.target.muted = !this.hasAttribute("nomuted");
+		this.target?.addEventListener("error", () => this.dispatchEvent(new Event("error")));
 	}
 	getMediaTarget() {
 		return this.target;
 	}
-	attributeChangedCallback(attrName, oldValue, newValue) {
-		if (attrName === "src" && oldValue !== newValue) this.target.src = newValue ?? "";
+	/** URL of a video the browser can play directly. Assigning a new one restarts playback. */
+	get src() {
+		return this.target?.src ?? "";
+	}
+	set src(value) {
+		const target = this.target;
+		if (target) target.src = value;
 	}
-	get target() {
-		const slotted = this.querySelector(":scope > [slot=media]");
-		if (slotted instanceof HTMLVideoElement) return slotted;
-		const video = this.querySelector("video") ?? this.shadowRoot?.querySelector("video");
-		return video instanceof HTMLVideoElement ? video : null;
+	/** The inner video's `MediaError`, or `null`. */
+	get error() {
+		return this.target?.error ?? null;
 	}
 };
 //#endregion

package/dist/default/media/background-video/base.js

@@ -0,0 +1,95 @@
+import { MediaAttachMixin } from "../../store/media-attach-mixin.js";
+import { getTemplateHTML, getTemplateVideo } from "./template.js";
+import { namedNodeMapToObject } from "@videojs/utils/dom";
+import { pick } from "@videojs/utils/object";
+//#region src/media/background-video/base.ts
+const HTMLElementBase = globalThis.HTMLElement ?? class {};
+const MediaAttachBase = MediaAttachMixin(HTMLElementBase);
+const PLAYBACK_DEFAULTS = [
+	"muted",
+	"loop",
+	"autoplay"
+];
+/**
+* The shadow setup, `src` wiring, and `target` that `<background-video>` and `<hls-background-video>` share. Each
+* subclass supplies its own `src` and declares which playback defaults authors may opt out of.
+*
+* @internal
+*/
+var BackgroundVideoBase = class extends MediaAttachBase {
+	static {
+		this.shadowRootOptions = { mode: "open" };
+	}
+	static {
+		this.getTemplateHTML = getTemplateHTML;
+	}
+	static {
+		this.optOuts = [
+			"muted",
+			"loop",
+			"autoplay"
+		];
+	}
+	static {
+		this.passthroughAttributes = [
+			"controls",
+			"controlslist",
+			"crossorigin",
+			"preload"
+		];
+	}
+	static get observedAttributes() {
+		return [
+			"src",
+			...this.optOuts,
+			...this.optOuts.map((name) => `no${name}`),
+			...this.passthroughAttributes
+		];
+	}
+	constructor() {
+		super();
+		const ctor = this.constructor;
+		if (!this.shadowRoot) {
+			const attrs = {
+				...pick(namedNodeMapToObject(this.attributes), ctor.passthroughAttributes),
+				playsinline: "",
+				disableremoteplayback: "",
+				disablepictureinpicture: ""
+			};
+			for (const name of PLAYBACK_DEFAULTS) if (this.#isDefaultOn(name)) attrs[name] = "";
+			this.attachShadow(ctor.shadowRootOptions);
+			this.shadowRoot.innerHTML = ctor.getTemplateHTML(attrs);
+		}
+		this.syncPlaybackDefaults();
+	}
+	/**
+	* Writes muted, loop, and autoplay onto the inner video as properties. The template's attributes only cover markup
+	* parsed with its attributes in place; an element created by script gets its `no*` attributes afterwards, and neither
+	* Chrome nor Firefox honor a `muted` attribute set after `document.createElement`.
+	*/
+	syncPlaybackDefaults() {
+		const target = this.target;
+		if (!target) return;
+		for (const name of PLAYBACK_DEFAULTS) target[name] = this.#isDefaultOn(name);
+	}
+	/** On unless its `no*` attribute is set and allowed; an explicit attribute such as `muted` wins over its opt-out. */
+	#isDefaultOn(name) {
+		const { optOuts } = this.constructor;
+		return this.hasAttribute(name) || !optOuts.includes(name) || !this.hasAttribute(`no${name}`);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		const { passthroughAttributes } = this.constructor;
+		if (name === "src") this.src = newValue ?? "";
+		else if (passthroughAttributes.includes(name)) {
+			if (newValue === null) this.target?.removeAttribute(name);
+			else this.target?.setAttribute(name, newValue);
+		} else this.syncPlaybackDefaults();
+	}
+	/** The inner `<video>` in the shadow root: what plays, and what `play()` / `pause()` belong on. */
+	get target() {
+		return getTemplateVideo(this.shadowRoot);
+	}
+};
+//#endregion
+export { BackgroundVideoBase };

package/dist/default/media/background-video/template.js

@@ -1,32 +1,25 @@
 import { serializeAttributes } from "@videojs/utils/dom";
-import { pick } from "@videojs/utils/object";
 //#region src/media/background-video/template.ts
 /**
-* Attributes forwarded to the inner `<video>`. `src` is deliberately not one of them: each element decides what to do
-* with it, whether that is assigning the inner video or handing it to a playback engine, and serializing it into the
-* template would start a native load either way.
-*/
-const VideoAttributes = [
-	"autoplay",
-	"controls",
-	"controlslist",
-	"crossorigin",
-	"disablepictureinpicture",
-	"disableremoteplayback",
-	"loop",
-	"muted",
-	"playsinline",
-	"preload"
-];
-/**
 * The shadow template both background-video elements render: a `<slot>` for a placeholder image, and a `<video>`
 * stretched over the host.
 *
+* `attrs` go onto the `<video>` as given; each element decides which of its own attributes to forward. `src` is never
+* among them, since serializing it would start a native load before an engine could take it.
+*
 * Shared so the two can't drift in presentation. `object-fit` and `object-position` are the only styling hooks — a
 * background video has no controls to theme.
 */
 function getTemplateHTML(attrs) {
-	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video${serializeAttributes(pick(attrs, [...VideoAttributes]))}></video>`;
+	return `<style> :host { position: relative; } video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--media-object-fit, inherit); object-position: var(--media-object-position, 50% 50%); } </style><slot></slot><video${serializeAttributes(attrs)}></video>`;
+}
+/**
+* The `<video>` from `getTemplateHTML`. Always the shadow one: the template has no slot that would render a light-DOM
+* `<video>`, so anything found there is either the placeholder or not displayed at all.
+*/
+function getTemplateVideo(shadowRoot) {
+	const video = shadowRoot?.querySelector("video");
+	return video instanceof HTMLVideoElement ? video : null;
 }
 //#endregion
-export { VideoAttributes, getTemplateHTML };
+export { getTemplateHTML, getTemplateVideo };