diff --git a/apps/sandbox/app/shared/html/sandbox-state.ts b/apps/sandbox/app/shared/html/sandbox-state.ts
index 0906da5a2..6300dbd9d 100644
--- a/apps/sandbox/app/shared/html/sandbox-state.ts
+++ b/apps/sandbox/app/shared/html/sandbox-state.ts
@@ -1,4 +1,12 @@
-import { getInitialSkin, getInitialSource } from '@app/shared/sandbox-listener';
+import {
+  getInitialAutoplay,
+  getInitialLoop,
+  getInitialMuted,
+  getInitialPreload,
+  getInitialSkin,
+  getInitialSource,
+  type PreloadValue,
+} from '@app/shared/sandbox-listener';
 import type { SourceId } from '@app/shared/sources';
 import type { Skin, Styling } from '@app/types';
 
@@ -10,6 +18,10 @@ export type HtmlSandboxState = {
   skin: Skin;
   source: SourceId;
   styling: Styling;
+  autoplay: boolean;
+  muted: boolean;
+  loop: boolean;
+  preload: PreloadValue;
 };
 
 export function createHtmlSandboxState(audioOnly?: boolean): HtmlSandboxState {
@@ -17,9 +29,25 @@ export function createHtmlSandboxState(audioOnly?: boolean): HtmlSandboxState {
     skin: getInitialSkin(),
     source: getInitialSource(audioOnly),
     styling: getInitialStyling(),
+    autoplay: getInitialAutoplay(),
+    muted: getInitialMuted(),
+    loop: getInitialLoop(),
+    preload: getInitialPreload(),
   };
 }
 
+/** Render the user-controlled media attributes (autoplay/muted/loop/preload) as HTML attributes. */
+export function renderMediaAttrs(state: HtmlSandboxState): string {
+  return [
+    state.autoplay ? 'autoplay' : '',
+    state.muted ? 'muted' : '',
+    state.loop ? 'loop' : '',
+    `preload="${state.preload}"`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
 export function createLatestLoader() {
   let loadVersion = 0;
 
diff --git a/apps/sandbox/app/shared/react/providers.ts b/apps/sandbox/app/shared/react/providers.ts
index 65be1ebed..b3cad8b85 100644
--- a/apps/sandbox/app/shared/react/providers.ts
+++ b/apps/sandbox/app/shared/react/providers.ts
@@ -1,10 +1,10 @@
 import { createPlayer } from '@videojs/react';
 import { audioFeatures } from '@videojs/react/audio';
 import { backgroundFeatures } from '@videojs/react/background';
+import { liveAudioFeatures } from '@videojs/react/live-audio';
+import { liveVideoFeatures } from '@videojs/react/live-video';
 import { videoFeatures } from '@videojs/react/video';
 
-// The `live-video` preset currently shares `videoFeatures`, so the same provider
-// works for both live and VOD playback — only the skin swaps on the source.
 export const { Provider: VideoProvider } = createPlayer({
   features: videoFeatures,
 });
@@ -16,3 +16,13 @@ export const { Provider: AudioProvider } = createPlayer({
 export const { Provider: BackgroundVideoProvider } = createPlayer({
   features: backgroundFeatures,
 });
+
+// Live providers register `liveFeature` so the LiveButton can read
+// `liveEdgeStart` / `targetLiveWindow` and seek to the live edge.
+export const { Provider: LiveVideoProvider } = createPlayer({
+  features: liveVideoFeatures,
+});
+
+export const { Provider: LiveAudioProvider } = createPlayer({
+  features: liveAudioFeatures,
+});
diff --git a/apps/sandbox/app/shared/react/use-autoplay.ts b/apps/sandbox/app/shared/react/use-autoplay.ts
new file mode 100644
index 000000000..ee411e6b9
--- /dev/null
+++ b/apps/sandbox/app/shared/react/use-autoplay.ts
@@ -0,0 +1,8 @@
+import { getInitialAutoplay, onAutoplayChange } from '@app/shared/sandbox-listener';
+import { useEffect, useState } from 'react';
+
+export function useAutoplay(): boolean {
+  const [autoplay, setAutoplay] = useState(getInitialAutoplay);
+  useEffect(() => onAutoplayChange(setAutoplay), []);
+  return autoplay;
+}
diff --git a/apps/sandbox/app/shared/react/use-loop.ts b/apps/sandbox/app/shared/react/use-loop.ts
new file mode 100644
index 000000000..9587b2fd5
--- /dev/null
+++ b/apps/sandbox/app/shared/react/use-loop.ts
@@ -0,0 +1,8 @@
+import { getInitialLoop, onLoopChange } from '@app/shared/sandbox-listener';
+import { useEffect, useState } from 'react';
+
+export function useLoop(): boolean {
+  const [loop, setLoop] = useState(getInitialLoop);
+  useEffect(() => onLoopChange(setLoop), []);
+  return loop;
+}
diff --git a/apps/sandbox/app/shared/react/use-muted.ts b/apps/sandbox/app/shared/react/use-muted.ts
new file mode 100644
index 000000000..8591f53c1
--- /dev/null
+++ b/apps/sandbox/app/shared/react/use-muted.ts
@@ -0,0 +1,8 @@
+import { getInitialMuted, onMutedChange } from '@app/shared/sandbox-listener';
+import { useEffect, useState } from 'react';
+
+export function useMuted(): boolean {
+  const [muted, setMuted] = useState(getInitialMuted);
+  useEffect(() => onMutedChange(setMuted), []);
+  return muted;
+}
diff --git a/apps/sandbox/app/shared/react/use-preload.ts b/apps/sandbox/app/shared/react/use-preload.ts
new file mode 100644
index 000000000..5cff41d73
--- /dev/null
+++ b/apps/sandbox/app/shared/react/use-preload.ts
@@ -0,0 +1,8 @@
+import { getInitialPreload, onPreloadChange, type PreloadValue } from '@app/shared/sandbox-listener';
+import { useEffect, useState } from 'react';
+
+export function usePreload(): PreloadValue {
+  const [preload, setPreload] = useState(getInitialPreload);
+  useEffect(() => onPreloadChange(setPreload), []);
+  return preload;
+}
diff --git a/apps/sandbox/app/shared/sandbox-listener.ts b/apps/sandbox/app/shared/sandbox-listener.ts
index b2d38aa9e..90a242bcf 100644
--- a/apps/sandbox/app/shared/sandbox-listener.ts
+++ b/apps/sandbox/app/shared/sandbox-listener.ts
@@ -2,6 +2,10 @@ import { SKINS } from '@app/constants';
 import type { Skin } from '@app/types';
 import { DEFAULT_AUDIO_SOURCE, SOURCES, type SourceId } from './sources';
 
+export const PRELOAD_VALUES = ['none', 'metadata', 'auto'] as const;
+export type PreloadValue = (typeof PRELOAD_VALUES)[number];
+export const DEFAULT_PRELOAD: PreloadValue = 'metadata';
+
 const params = new URLSearchParams(window.location.search);
 
 function readSkin(): Skin {
@@ -16,8 +20,21 @@ function readSource(): SourceId {
   return source && source in SOURCES ? (source as SourceId) : 'hls-1';
 }
 
+function readBoolean(name: string): boolean {
+  return params.get(name) === '1';
+}
+
+function readPreload(): PreloadValue {
+  const value = params.get('preload');
+  return PRELOAD_VALUES.includes(value as PreloadValue) ? (value as PreloadValue) : DEFAULT_PRELOAD;
+}
+
 let currentSkin = readSkin();
 let currentSource = readSource();
+let currentAutoplay = readBoolean('autoplay');
+let currentMuted = readBoolean('muted');
+let currentLoop = readBoolean('loop');
+let currentPreload = readPreload();
 
 export function getInitialSkin(): Skin {
   return currentSkin;
@@ -62,3 +79,79 @@ export function onSourceChange(callback: (source: SourceId) => void): () => void
     window.removeEventListener('message', handler);
   };
 }
+
+export function getInitialAutoplay(): boolean {
+  return currentAutoplay;
+}
+
+export function onAutoplayChange(callback: (autoplay: boolean) => void): () => void {
+  const handler = (event: MessageEvent) => {
+    if (event.data?.type !== 'autoplay-change' || typeof event.data.autoplay !== 'boolean') return;
+
+    currentAutoplay = event.data.autoplay;
+    callback(currentAutoplay);
+  };
+
+  window.addEventListener('message', handler);
+
+  return () => {
+    window.removeEventListener('message', handler);
+  };
+}
+
+export function getInitialMuted(): boolean {
+  return currentMuted;
+}
+
+export function onMutedChange(callback: (muted: boolean) => void): () => void {
+  const handler = (event: MessageEvent) => {
+    if (event.data?.type !== 'muted-change' || typeof event.data.muted !== 'boolean') return;
+
+    currentMuted = event.data.muted;
+    callback(currentMuted);
+  };
+
+  window.addEventListener('message', handler);
+
+  return () => {
+    window.removeEventListener('message', handler);
+  };
+}
+
+export function getInitialLoop(): boolean {
+  return currentLoop;
+}
+
+export function onLoopChange(callback: (loop: boolean) => void): () => void {
+  const handler = (event: MessageEvent) => {
+    if (event.data?.type !== 'loop-change' || typeof event.data.loop !== 'boolean') return;
+
+    currentLoop = event.data.loop;
+    callback(currentLoop);
+  };
+
+  window.addEventListener('message', handler);
+
+  return () => {
+    window.removeEventListener('message', handler);
+  };
+}
+
+export function getInitialPreload(): PreloadValue {
+  return currentPreload;
+}
+
+export function onPreloadChange(callback: (preload: PreloadValue) => void): () => void {
+  const handler = (event: MessageEvent) => {
+    if (event.data?.type !== 'preload-change' || !PRELOAD_VALUES.includes(event.data.preload)) return;
+
+    currentPreload = event.data.preload;
+    callback(currentPreload);
+  };
+
+  window.addEventListener('message', handler);
+
+  return () => {
+    window.removeEventListener('message', handler);
+  };
+}
diff --git a/apps/sandbox/app/shell/app.tsx b/apps/sandbox/app/shell/app.tsx
index e25fb1849..5335902ed 100644
--- a/apps/sandbox/app/shell/app.tsx
+++ b/apps/sandbox/app/shell/app.tsx
@@ -1,4 +1,5 @@
 import { PLATFORMS, PRESETS, STYLINGS } from '@app/constants';
+import { DEFAULT_PRELOAD, PRELOAD_VALUES, type PreloadValue } from '@app/shared/sandbox-listener';
 import type { SourceId } from '@app/shared/sources';
 import {
   DASH_SOURCE_IDS,
@@ -22,12 +23,17 @@ function getPagePath(platform: Platform, preset: Preset): string {
 
 function readParams() {
   const params = new URLSearchParams(location.search);
+  const preload = params.get('preload');
   return {
     platform: (params.get('platform') ?? 'html') as Platform,
     styling: (params.get('styling') ?? 'css') as Styling,
     preset: (params.get('preset') ?? 'video') as Preset,
     skin: (params.get('skin') ?? 'default') as 'default' | 'minimal',
     source: (params.get('source') ?? 'hls-1') as SourceId,
+    autoplay: params.get('autoplay') === '1',
+    muted: params.get('muted') === '1',
+    loop: params.get('loop') === '1',
+    preload: PRELOAD_VALUES.includes(preload as PreloadValue) ? (preload as PreloadValue) : DEFAULT_PRELOAD,
   };
 }
 
@@ -38,15 +44,29 @@ export function App() {
   const [preset, setPreset] = useState<Preset>(initial.preset);
   const [skin, setSkin] = useState(initial.skin);
   const [source, setSource] = useState(initial.source);
+  const [autoplay, setAutoplay] = useState(initial.autoplay);
+  const [muted, setMuted] = useState(initial.muted);
+  const [loop, setLoop] = useState(initial.loop);
+  const [preload, setPreload] = useState<PreloadValue>(initial.preload);
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const pagePath = getPagePath(platform, preset);
 
-  // Keep the URL in sync with all state (including skin + source)
+  // Keep the URL in sync with all state.
   useEffect(() => {
-    const params = new URLSearchParams({ platform, styling, preset, skin, source });
+    const params = new URLSearchParams({
+      platform,
+      styling,
+      preset,
+      skin,
+      source,
+      autoplay: autoplay ? '1' : '0',
+      muted: muted ? '1' : '0',
+      loop: loop ? '1' : '0',
+      preload,
+    });
     history.replaceState(null, '', `/?${params}`);
-  }, [platform, styling, preset, skin, source]);
+  }, [platform, styling, preset, skin, source, autoplay, muted, loop, preload]);
 
   useEffect(() => {
     iframeRef.current?.contentWindow?.postMessage({ type: 'skin-change', skin }, '*');
@@ -56,6 +76,22 @@ export function App() {
     iframeRef.current?.contentWindow?.postMessage({ type: 'source-change', source }, '*');
   }, [source]);
 
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage({ type: 'autoplay-change', autoplay }, '*');
+  }, [autoplay]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage({ type: 'muted-change', muted }, '*');
+  }, [muted]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage({ type: 'loop-change', loop }, '*');
+  }, [loop]);
+
+  useEffect(() => {
+    iframeRef.current?.contentWindow?.postMessage({ type: 'preload-change', preload }, '*');
+  }, [preload]);
+
   // Constrain source to MP4 when switching to audio
   useEffect(() => {
     if (preset === 'audio' && SOURCES[source].type !== 'mp4') {
@@ -102,6 +138,14 @@ export function App() {
         onSkinChange={setSkin}
         source={source}
         onSourceChange={handleSourceChange}
+        autoplay={autoplay}
+        onAutoplayChange={setAutoplay}
+        muted={muted}
+        onMutedChange={setMuted}
+        loop={loop}
+        onLoopChange={setLoop}
+        preload={preload}
+        onPreloadChange={setPreload}
         availableSources={availableSources}
         isBackgroundVideo={preset === 'background-video'}
         isSimpleHlsVideo={preset === 'simple-hls-video'}
@@ -120,6 +164,10 @@ export function App() {
         skin={skin}
         styling={styling}
         source={source}
+        autoplay={autoplay}
+        muted={muted}
+        loop={loop}
+        preload={preload}
       />
     </div>
   );
diff --git a/apps/sandbox/app/shell/navbar.tsx b/apps/sandbox/app/shell/navbar.tsx
index 04416306e..d540aa005 100644
--- a/apps/sandbox/app/shell/navbar.tsx
+++ b/apps/sandbox/app/shell/navbar.tsx
@@ -1,6 +1,8 @@
 import type { SKINS } from '@app/constants';
+import { PRELOAD_VALUES, type PreloadValue } from '@app/shared/sandbox-listener';
 import type { SourceId } from '@app/shared/sources';
 import type { Platform, Preset, Skin, Styling } from '@app/types';
+import { useEffect, useId, useRef, useState } from 'react';
 
 type NavbarProps = {
   platform: Platform;
@@ -13,6 +15,14 @@ type NavbarProps = {
   onSkinChange: (value: Skin) => void;
   source: SourceId;
   onSourceChange: (value: string) => void;
+  autoplay: boolean;
+  onAutoplayChange: (value: boolean) => void;
+  muted: boolean;
+  onMutedChange: (value: boolean) => void;
+  loop: boolean;
+  onLoopChange: (value: boolean) => void;
+  preload: PreloadValue;
+  onPreloadChange: (value: PreloadValue) => void;
   availableSources: readonly SourceId[];
   isBackgroundVideo: boolean;
   isSimpleHlsVideo: boolean;
@@ -55,6 +65,14 @@ export function Navbar({
   onSkinChange,
   source,
   onSourceChange,
+  autoplay,
+  onAutoplayChange,
+  muted,
+  onMutedChange,
+  loop,
+  onLoopChange,
+  preload,
+  onPreloadChange,
   availableSources,
   isBackgroundVideo,
   isSimpleHlsVideo,
@@ -122,7 +140,17 @@ export function Navbar({
         />
       </div>
 
-      <div className="ml-auto">
+      <div className="ml-auto flex items-center gap-1">
+        <SettingsMenu
+          autoplay={autoplay}
+          onAutoplayChange={onAutoplayChange}
+          muted={muted}
+          onMutedChange={onMutedChange}
+          loop={loop}
+          onLoopChange={onLoopChange}
+          preload={preload}
+          onPreloadChange={onPreloadChange}
+        />
         <a
           href="https://github.com/videojs/v10"
           target="_blank"
@@ -149,6 +177,177 @@ function capitalize(s: string): string {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
+type SettingsMenuProps = {
+  autoplay: boolean;
+  onAutoplayChange: (value: boolean) => void;
+  muted: boolean;
+  onMutedChange: (value: boolean) => void;
+  loop: boolean;
+  onLoopChange: (value: boolean) => void;
+  preload: PreloadValue;
+  onPreloadChange: (value: PreloadValue) => void;
+};
+
+function SettingsMenu({
+  autoplay,
+  onAutoplayChange,
+  muted,
+  onMutedChange,
+  loop,
+  onLoopChange,
+  preload,
+  onPreloadChange,
+}: SettingsMenuProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const menuId = useId();
+  const autoplayId = useId();
+  const mutedId = useId();
+  const loopId = useId();
+  const preloadId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false);
+    };
+    // Clicks inside the preview iframe don't bubble to the parent document, so
+    // also close when the parent window loses focus (e.g. iframe takes focus).
+    const handleBlur = () => setOpen(false);
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('blur', handleBlur);
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('blur', handleBlur);
+    };
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        aria-label="Player settings"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={menuId}
+        onClick={() => setOpen((value) => !value)}
+        className="inline-flex items-center justify-center size-8 rounded-md text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-zinc-50 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors aria-expanded:bg-zinc-100 dark:aria-expanded:bg-zinc-800 aria-expanded:text-zinc-950 dark:aria-expanded:text-zinc-50"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-4"
+          aria-hidden="true"
+        >
+          <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+          <circle cx="12" cy="12" r="3" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          id={menuId}
+          role="menu"
+          className="absolute right-0 top-full mt-2 z-20 grid grid-cols-[1fr_auto] auto-rows-[1.75rem] items-center gap-x-6 gap-y-1 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 shadow-md shadow-black/5"
+        >
+          <CheckboxItem id={autoplayId} label="Autoplay" checked={autoplay} onChange={onAutoplayChange} />
+          <CheckboxItem id={mutedId} label="Muted" checked={muted} onChange={onMutedChange} />
+          <CheckboxItem id={loopId} label="Loop" checked={loop} onChange={onLoopChange} />
+          <SelectItem
+            id={preloadId}
+            label="Preload"
+            value={preload}
+            onChange={(value) => onPreloadChange(value as PreloadValue)}
+            options={PRELOAD_VALUES.map((value) => ({ value, label: value }))}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+type CheckboxItemProps = {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+};
+
+function CheckboxItem({ id, label, checked, onChange }: CheckboxItemProps) {
+  return (
+    <>
+      <label htmlFor={id} className="text-[13px] font-medium text-zinc-700 dark:text-zinc-200 cursor-pointer">
+        {label}
+      </label>
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={(event) => onChange(event.target.checked)}
+        className="justify-self-start size-3.5 rounded border-zinc-300 dark:border-zinc-700 accent-zinc-950 dark:accent-zinc-50 cursor-pointer"
+      />
+    </>
+  );
+}
+
+type SelectItemProps = {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+};
+
+function SelectItem({ id, label, value, onChange, options }: SelectItemProps) {
+  return (
+    <>
+      <label htmlFor={id} className="text-[13px] font-medium text-zinc-700 dark:text-zinc-200 cursor-pointer">
+        {label}
+      </label>
+      <div className="relative justify-self-start">
+        <select
+          id={id}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          className="h-7 appearance-none rounded border-none bg-clip-border ring ring-zinc-800/10 dark:ring-white/10 bg-white dark:bg-zinc-900 pl-2 pr-7 text-[13px] font-medium text-zinc-950 dark:text-zinc-50 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900 focus:outline-2 focus:outline-zinc-950 dark:focus:outline-zinc-50 focus:outline-offset-2 cursor-pointer"
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        <svg
+          className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 size-3 text-zinc-500 dark:text-zinc-400"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </div>
+    </>
+  );
+}
+
 type SelectOption = {
   value: string;
   label: string;
diff --git a/apps/sandbox/app/shell/preview.tsx b/apps/sandbox/app/shell/preview.tsx
index 28691ba16..53af2f2e3 100644
--- a/apps/sandbox/app/shell/preview.tsx
+++ b/apps/sandbox/app/shell/preview.tsx
@@ -1,3 +1,4 @@
+import type { PreloadValue } from '@app/shared/sandbox-listener';
 import type { SourceId } from '@app/shared/sources';
 import type { Preset, Skin, Styling } from '@app/types';
 import { forwardRef, useState } from 'react';
@@ -8,19 +9,34 @@ type PreviewProps = {
   skin: Skin;
   styling: Styling;
   source: SourceId;
+  autoplay: boolean;
+  muted: boolean;
+  loop: boolean;
+  preload: PreloadValue;
 };
 
 export const Preview = forwardRef<HTMLIFrameElement, PreviewProps>(function Preview(
-  { pagePath, preset, skin, styling, source },
+  { pagePath, preset, skin, styling, source, autoplay, muted, loop, preload },
   ref
 ) {
-  const [iframeUrl] = useState(
-    () =>
-      `${pagePath}?preset=${encodeURIComponent(preset)}&skin=${encodeURIComponent(skin)}&styling=${encodeURIComponent(styling)}&source=${encodeURIComponent(source)}`
-  );
-  const openUrl =
-    `${pagePath}?preset=${encodeURIComponent(preset)}&skin=${encodeURIComponent(skin)}&styling=${encodeURIComponent(styling)}` +
-    `&source=${encodeURIComponent(source)}`;
+  const buildUrl = (base: string) => {
+    const params = new URLSearchParams({
+      preset,
+      skin,
+      styling,
+      source,
+      autoplay: autoplay ? '1' : '0',
+      muted: muted ? '1' : '0',
+      loop: loop ? '1' : '0',
+      preload,
+    });
+    return `${base}?${params}`;
+  };
+
+  // Capture the initial query so the iframe doesn't reload when autoplay/muted
+  // toggle — those changes are streamed in via postMessage.
+  const [iframeUrl] = useState(() => buildUrl(pagePath));
+  const openUrl = buildUrl(pagePath);
 
   return (
     <main className="flex-1 min-h-0 relative bg-zinc-50 dark:bg-zinc-900">
diff --git a/apps/sandbox/templates/cdn/main.ts b/apps/sandbox/templates/cdn/main.ts
index 03a535a8c..e0d6a82bc 100644
--- a/apps/sandbox/templates/cdn/main.ts
+++ b/apps/sandbox/templates/cdn/main.ts
@@ -1,9 +1,16 @@
 import '@app/styles.css';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { CSS_SKIN_TAGS, LIVE_VIDEO_CSS_SKIN_TAGS } from '@app/shared/html/skin-tags';
 import { renderStoryboard } from '@app/shared/html/storyboard';
 import { loadAudioStylesheets, loadVideoStylesheets } from '@app/shared/html/stylesheets';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { BACKGROUND_VIDEO_SRC, getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 import type { Preset, Skin } from '@app/types';
 
@@ -73,10 +80,10 @@ async function loadCdnMedia(preset: Preset) {
 // Rendering — produces the exact HTML markup the installation builder generates.
 // ---------------------------------------------------------------------------
 
-function getPlayerTag(preset: Preset): string {
+function getPlayerTag(preset: Preset, live: boolean): string {
   if (preset === 'background-video') return 'background-video-player';
-  if (preset === 'audio' || preset === 'mux-audio') return 'audio-player';
-  return 'video-player';
+  if (preset === 'audio' || preset === 'mux-audio') return live ? 'live-audio-player' : 'audio-player';
+  return live ? 'live-video-player' : 'video-player';
 }
 
 function getSkinTag(preset: Preset, skin: Skin, live: boolean): string {
@@ -135,7 +142,7 @@ async function render() {
   loadStylesheets(preset, state.skin);
 
   const root = document.getElementById('root')!;
-  const playerTag = getPlayerTag(preset);
+  const playerTag = getPlayerTag(preset, live);
   const skinTag = getSkinTag(preset, state.skin, live);
   const mediaTag = getMediaTag(preset);
   const source = SOURCES[state.source];
@@ -143,7 +150,7 @@ async function render() {
   const poster = isVideoPreset(preset) ? getPosterSrc(state.source) : undefined;
 
   const sourceAttr = preset === 'background-video' ? `src="${BACKGROUND_VIDEO_SRC}"` : `src="${source.url}"`;
-  const liveAttrs = live ? 'autoplay muted' : '';
+  const mediaAttrs = renderMediaAttrs(state);
 
   // Background video needs viewport dimensions instead of flex centering.
   if (preset === 'background-video') {
@@ -167,7 +174,7 @@ async function render() {
       <div class="w-full max-w-xl mx-auto">
         <${playerTag}>
           <${skinTag}>
-            <${mediaTag} ${sourceAttr}></${mediaTag}>
+            <${mediaTag} ${sourceAttr} ${mediaAttrs}></${mediaTag}>
           </${skinTag}>
         </${playerTag}>
       </div>
@@ -178,7 +185,7 @@ async function render() {
   root.innerHTML = html`
     <${playerTag}>
       <${skinTag} class="aspect-video max-w-4xl mx-auto">
-        <${mediaTag} ${sourceAttr} ${liveAttrs} playsinline crossorigin="anonymous">
+        <${mediaTag} ${sourceAttr} ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </${mediaTag}>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
@@ -198,3 +205,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-audio/main.ts b/apps/sandbox/templates/html-audio/main.ts
index 6054ba313..9e84b2394 100644
--- a/apps/sandbox/templates/html-audio/main.ts
+++ b/apps/sandbox/templates/html-audio/main.ts
@@ -1,8 +1,15 @@
 import '@app/styles.css';
 import '@videojs/html/audio/player';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadAudioSkinTag } from '@app/shared/html/skins';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -14,11 +21,13 @@ async function render() {
   const tag = await loadLatest(() => loadAudioSkinTag(state.skin, state.styling));
   if (!tag) return;
 
+  const mediaAttrs = renderMediaAttrs(state);
+
   document.getElementById('root')!.innerHTML = html`
     <div class="w-full max-w-xl mx-auto">
       <audio-player>
         <${tag}>
-          <audio src="${SOURCES[state.source].url}"></audio>
+          <audio src="${SOURCES[state.source].url}" ${mediaAttrs}></audio>
         </${tag}>
       </audio-player>
     </div>
@@ -36,3 +45,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-dash-video/main.ts b/apps/sandbox/templates/html-dash-video/main.ts
index 3e28c698a..6b4338ee0 100644
--- a/apps/sandbox/templates/html-dash-video/main.ts
+++ b/apps/sandbox/templates/html-dash-video/main.ts
@@ -1,10 +1,17 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
 import '@videojs/html/media/dash-video';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -18,11 +25,12 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const mediaAttrs = renderMediaAttrs(state);
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <dash-video src="${SOURCES[state.source].url}" playsinline>
+        <dash-video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline>
           ${renderStoryboard(storyboard)}
         </dash-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
@@ -42,3 +50,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-hls-video/main.ts b/apps/sandbox/templates/html-hls-video/main.ts
index 2bbdb93cd..43adf4a77 100644
--- a/apps/sandbox/templates/html-hls-video/main.ts
+++ b/apps/sandbox/templates/html-hls-video/main.ts
@@ -1,10 +1,17 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
 import '@videojs/html/media/hls-video';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -19,17 +26,18 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
-  const liveAttrs = live ? 'autoplay muted' : '';
+  const mediaAttrs = renderMediaAttrs(state);
+  const playerTag = live ? 'live-video-player' : 'video-player';
 
   document.getElementById('root')!.innerHTML = html`
-    <video-player>
+    <${playerTag}>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
+        <hls-video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
       </${tag}>
-    </video-player>
+    </${playerTag}>
   `;
 }
 
@@ -44,3 +52,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-mux-audio/main.ts b/apps/sandbox/templates/html-mux-audio/main.ts
index 3a2e45bfc..1120e6bec 100644
--- a/apps/sandbox/templates/html-mux-audio/main.ts
+++ b/apps/sandbox/templates/html-mux-audio/main.ts
@@ -1,9 +1,16 @@
 import '@app/styles.css';
 import '@videojs/html/audio/player';
 import '@videojs/html/media/mux-audio';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadAudioSkinTag } from '@app/shared/html/skins';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -15,11 +22,13 @@ async function render() {
   const tag = await loadLatest(() => loadAudioSkinTag(state.skin, state.styling));
   if (!tag) return;
 
+  const mediaAttrs = renderMediaAttrs(state);
+
   document.getElementById('root')!.innerHTML = html`
     <div class="w-full max-w-xl mx-auto">
       <audio-player>
         <${tag}>
-          <mux-audio src="${SOURCES[state.source].url}" debug crossorigin="anonymous"></mux-audio>
+          <mux-audio src="${SOURCES[state.source].url}" debug ${mediaAttrs} crossorigin="anonymous"></mux-audio>
         </${tag}>
       </audio-player>
     </div>
@@ -37,3 +46,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-mux-video/main.ts b/apps/sandbox/templates/html-mux-video/main.ts
index b90b0cbc5..317b3fc04 100644
--- a/apps/sandbox/templates/html-mux-video/main.ts
+++ b/apps/sandbox/templates/html-mux-video/main.ts
@@ -1,10 +1,17 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
 import '@videojs/html/media/mux-video';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -19,17 +26,18 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
-  const liveAttrs = live ? 'autoplay muted' : '';
+  const mediaAttrs = renderMediaAttrs(state);
+  const playerTag = live ? 'live-video-player' : 'video-player';
 
   document.getElementById('root')!.innerHTML = html`
-    <video-player>
+    <${playerTag}>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <mux-video src="${SOURCES[state.source].url}" debug ${liveAttrs} playsinline crossorigin="anonymous">
+        <mux-video src="${SOURCES[state.source].url}" debug ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </mux-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
       </${tag}>
-    </video-player>
+    </${playerTag}>
   `;
 }
 
@@ -44,3 +52,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-native-hls-video/main.ts b/apps/sandbox/templates/html-native-hls-video/main.ts
index e62da463d..6c0b4941a 100644
--- a/apps/sandbox/templates/html-native-hls-video/main.ts
+++ b/apps/sandbox/templates/html-native-hls-video/main.ts
@@ -1,10 +1,17 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
 import '@videojs/html/media/native-hls-video';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -19,17 +26,18 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
-  const liveAttrs = live ? 'autoplay muted' : '';
+  const mediaAttrs = renderMediaAttrs(state);
+  const playerTag = live ? 'live-video-player' : 'video-player';
 
   document.getElementById('root')!.innerHTML = html`
-    <video-player>
+    <${playerTag}>
       <${tag} class="w-full aspect-video max-w-4xl mx-auto">
-        <native-hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
+        <native-hls-video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </native-hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
       </${tag}>
-    </video-player>
+    </${playerTag}>
   `;
 }
 
@@ -44,3 +52,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-simple-hls-video/main.ts b/apps/sandbox/templates/html-simple-hls-video/main.ts
index 21c820aa2..e1dd163dd 100644
--- a/apps/sandbox/templates/html-simple-hls-video/main.ts
+++ b/apps/sandbox/templates/html-simple-hls-video/main.ts
@@ -1,10 +1,17 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
 import '@videojs/html/media/simple-hls-video';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, isLiveSource, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -19,17 +26,18 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
-  const liveAttrs = live ? 'autoplay muted' : '';
+  const mediaAttrs = renderMediaAttrs(state);
+  const playerTag = live ? 'live-video-player' : 'video-player';
 
   document.getElementById('root')!.innerHTML = html`
-    <video-player>
+    <${playerTag}>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <simple-hls-video src="${SOURCES[state.source].url}" ${liveAttrs} playsinline crossorigin="anonymous">
+        <simple-hls-video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </simple-hls-video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
       </${tag}>
-    </video-player>
+    </${playerTag}>
   `;
 }
 
@@ -44,3 +52,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/html-video/main.ts b/apps/sandbox/templates/html-video/main.ts
index c82fb7014..76f31ddd0 100644
--- a/apps/sandbox/templates/html-video/main.ts
+++ b/apps/sandbox/templates/html-video/main.ts
@@ -1,9 +1,16 @@
 import '@app/styles.css';
 import '@videojs/html/video/player';
-import { createHtmlSandboxState, createLatestLoader } from '@app/shared/html/sandbox-state';
+import { createHtmlSandboxState, createLatestLoader, renderMediaAttrs } from '@app/shared/html/sandbox-state';
 import { loadVideoSkinTag } from '@app/shared/html/skins';
 import { renderStoryboard } from '@app/shared/html/storyboard';
-import { onSkinChange, onSourceChange } from '@app/shared/sandbox-listener';
+import {
+  onAutoplayChange,
+  onLoopChange,
+  onMutedChange,
+  onPreloadChange,
+  onSkinChange,
+  onSourceChange,
+} from '@app/shared/sandbox-listener';
 import { getPosterSrc, getStoryboardSrc, SOURCES } from '@app/shared/sources';
 
 const html = String.raw;
@@ -17,11 +24,12 @@ async function render() {
 
   const storyboard = getStoryboardSrc(state.source);
   const poster = getPosterSrc(state.source);
+  const mediaAttrs = renderMediaAttrs(state);
 
   document.getElementById('root')!.innerHTML = html`
     <video-player>
       <${tag} class="aspect-video max-w-4xl mx-auto">
-        <video src="${SOURCES[state.source].url}" playsinline crossorigin="anonymous">
+        <video src="${SOURCES[state.source].url}" ${mediaAttrs} playsinline crossorigin="anonymous">
           ${renderStoryboard(storyboard)}
         </video>
         ${poster ? html`<img slot="poster" src="${poster}" alt="Video poster" />` : ''}
@@ -41,3 +49,23 @@ onSourceChange((source) => {
   state.source = source;
   render();
 });
+
+onAutoplayChange((autoplay) => {
+  state.autoplay = autoplay;
+  render();
+});
+
+onMutedChange((muted) => {
+  state.muted = muted;
+  render();
+});
+
+onLoopChange((loop) => {
+  state.loop = loop;
+  render();
+});
+
+onPreloadChange((preload) => {
+  state.preload = preload;
+  render();
+});
diff --git a/apps/sandbox/templates/react-audio/main.tsx b/apps/sandbox/templates/react-audio/main.tsx
index 23ecc94e1..1441f574b 100644
--- a/apps/sandbox/templates/react-audio/main.tsx
+++ b/apps/sandbox/templates/react-audio/main.tsx
@@ -1,6 +1,10 @@
 import '@app/styles.css';
 import { AudioProvider } from '@app/shared/react/providers';
 import { AudioSkinComponent } from '@app/shared/react/skins';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { SOURCES } from '@app/shared/sources';
@@ -17,11 +21,15 @@ function App() {
   const skin = useSkin();
   const source = useSource(true);
   const styling = useMemo(readStyling, []);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
 
   return (
     <AudioProvider>
       <AudioSkinComponent skin={skin} styling={styling} className="w-full max-w-xl mx-auto">
-        <Audio src={SOURCES[source].url} />
+        <Audio src={SOURCES[source].url} autoPlay={autoplay} muted={muted} loop={loop} preload={preload} />
       </AudioSkinComponent>
     </AudioProvider>
   );
diff --git a/apps/sandbox/templates/react-dash-video/main.tsx b/apps/sandbox/templates/react-dash-video/main.tsx
index 22ad3f6e5..8ece3452a 100644
--- a/apps/sandbox/templates/react-dash-video/main.tsx
+++ b/apps/sandbox/templates/react-dash-video/main.tsx
@@ -1,6 +1,10 @@
 import '@app/styles.css';
 import { VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { SOURCES } from '@app/shared/sources';
@@ -17,11 +21,22 @@ function App() {
   const skin = useSkin();
   const source = useSource();
   const styling = useMemo(readStyling, []);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
 
   return (
     <VideoProvider>
       <VideoSkinComponent skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
-        <DashVideo src={SOURCES[source].url} playsInline />
+        <DashVideo
+          src={SOURCES[source].url}
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+        />
       </VideoSkinComponent>
     </VideoProvider>
   );
diff --git a/apps/sandbox/templates/react-hls-video/main.tsx b/apps/sandbox/templates/react-hls-video/main.tsx
index 97fbbf9de..438952ddb 100644
--- a/apps/sandbox/templates/react-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-hls-video/main.tsx
@@ -1,8 +1,12 @@
 import '@app/styles.css';
-import { VideoProvider } from '@app/shared/react/providers';
+import { LiveVideoProvider, VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
 import { Storyboard } from '@app/shared/react/storyboard';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
 import { usePoster } from '@app/shared/react/use-poster';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
@@ -23,9 +27,14 @@ function App() {
   const poster = usePoster();
   const storyboard = useStoryboard();
   const live = isLiveSource(source);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
+  const Provider = live ? LiveVideoProvider : VideoProvider;
 
   return (
-    <VideoProvider>
+    <Provider>
       <VideoSkinComponent
         poster={poster}
         skin={skin}
@@ -33,11 +42,19 @@ function App() {
         live={live}
         className="aspect-video max-w-4xl mx-auto"
       >
-        <HlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
+        <HlsVideo
+          src={SOURCES[source].url}
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+          crossOrigin="anonymous"
+        >
           <Storyboard src={storyboard} />
         </HlsVideo>
       </VideoSkinComponent>
-    </VideoProvider>
+    </Provider>
   );
 }
 
diff --git a/apps/sandbox/templates/react-mux-audio/main.tsx b/apps/sandbox/templates/react-mux-audio/main.tsx
index 40716fe5f..e80d2caf2 100644
--- a/apps/sandbox/templates/react-mux-audio/main.tsx
+++ b/apps/sandbox/templates/react-mux-audio/main.tsx
@@ -1,6 +1,10 @@
 import '@app/styles.css';
 import { AudioProvider } from '@app/shared/react/providers';
 import { AudioSkinComponent } from '@app/shared/react/skins';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { SOURCES } from '@app/shared/sources';
@@ -17,11 +21,23 @@ function App() {
   const skin = useSkin();
   const source = useSource();
   const styling = useMemo(readStyling, []);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
 
   return (
     <AudioProvider>
       <AudioSkinComponent skin={skin} styling={styling} className="w-full max-w-xl mx-auto">
-        <MuxAudio src={SOURCES[source].url} debug crossOrigin="anonymous" />
+        <MuxAudio
+          src={SOURCES[source].url}
+          debug
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          crossOrigin="anonymous"
+        />
       </AudioSkinComponent>
     </AudioProvider>
   );
diff --git a/apps/sandbox/templates/react-mux-video/main.tsx b/apps/sandbox/templates/react-mux-video/main.tsx
index 113e916c0..921bd43e7 100644
--- a/apps/sandbox/templates/react-mux-video/main.tsx
+++ b/apps/sandbox/templates/react-mux-video/main.tsx
@@ -1,8 +1,12 @@
 import '@app/styles.css';
-import { VideoProvider } from '@app/shared/react/providers';
+import { LiveVideoProvider, VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
 import { Storyboard } from '@app/shared/react/storyboard';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
 import { usePoster } from '@app/shared/react/use-poster';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
@@ -23,9 +27,14 @@ function App() {
   const poster = usePoster();
   const storyboard = useStoryboard();
   const live = isLiveSource(source);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
+  const Provider = live ? LiveVideoProvider : VideoProvider;
 
   return (
-    <VideoProvider>
+    <Provider>
       <VideoSkinComponent
         poster={poster}
         skin={skin}
@@ -33,11 +42,20 @@ function App() {
         live={live}
         className="aspect-video max-w-4xl mx-auto"
       >
-        <MuxVideo src={SOURCES[source].url} debug autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
+        <MuxVideo
+          src={SOURCES[source].url}
+          debug
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+          crossOrigin="anonymous"
+        >
           <Storyboard src={storyboard} />
         </MuxVideo>
       </VideoSkinComponent>
-    </VideoProvider>
+    </Provider>
   );
 }
 
diff --git a/apps/sandbox/templates/react-native-hls-video/main.tsx b/apps/sandbox/templates/react-native-hls-video/main.tsx
index ad636faec..3ceb1b547 100644
--- a/apps/sandbox/templates/react-native-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-native-hls-video/main.tsx
@@ -1,8 +1,12 @@
 import '@app/styles.css';
-import { VideoProvider } from '@app/shared/react/providers';
+import { LiveVideoProvider, VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
 import { Storyboard } from '@app/shared/react/storyboard';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
 import { usePoster } from '@app/shared/react/use-poster';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
@@ -23,9 +27,14 @@ function App() {
   const poster = usePoster();
   const storyboard = useStoryboard();
   const live = isLiveSource(source);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
+  const Provider = live ? LiveVideoProvider : VideoProvider;
 
   return (
-    <VideoProvider>
+    <Provider>
       <VideoSkinComponent
         poster={poster}
         skin={skin}
@@ -33,11 +42,19 @@ function App() {
         live={live}
         className="w-full aspect-video max-w-4xl mx-auto"
       >
-        <NativeHlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
+        <NativeHlsVideo
+          src={SOURCES[source].url}
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+          crossOrigin="anonymous"
+        >
           <Storyboard src={storyboard} />
         </NativeHlsVideo>
       </VideoSkinComponent>
-    </VideoProvider>
+    </Provider>
   );
 }
 
diff --git a/apps/sandbox/templates/react-simple-hls-video/main.tsx b/apps/sandbox/templates/react-simple-hls-video/main.tsx
index 22bb332e0..374196d60 100644
--- a/apps/sandbox/templates/react-simple-hls-video/main.tsx
+++ b/apps/sandbox/templates/react-simple-hls-video/main.tsx
@@ -1,8 +1,12 @@
 import '@app/styles.css';
-import { VideoProvider } from '@app/shared/react/providers';
+import { LiveVideoProvider, VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
 import { Storyboard } from '@app/shared/react/storyboard';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
 import { usePoster } from '@app/shared/react/use-poster';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
@@ -23,9 +27,14 @@ function App() {
   const poster = usePoster();
   const storyboard = useStoryboard();
   const live = isLiveSource(source);
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
+  const Provider = live ? LiveVideoProvider : VideoProvider;
 
   return (
-    <VideoProvider>
+    <Provider>
       <VideoSkinComponent
         poster={poster}
         skin={skin}
@@ -33,11 +42,19 @@ function App() {
         live={live}
         className="aspect-video max-w-4xl mx-auto"
       >
-        <SimpleHlsVideo src={SOURCES[source].url} autoPlay={live} muted={live} playsInline crossOrigin="anonymous">
+        <SimpleHlsVideo
+          src={SOURCES[source].url}
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+          crossOrigin="anonymous"
+        >
           <Storyboard src={storyboard} />
         </SimpleHlsVideo>
       </VideoSkinComponent>
-    </VideoProvider>
+    </Provider>
   );
 }
 
diff --git a/apps/sandbox/templates/react-video/main.tsx b/apps/sandbox/templates/react-video/main.tsx
index cb195405e..84909cb8b 100644
--- a/apps/sandbox/templates/react-video/main.tsx
+++ b/apps/sandbox/templates/react-video/main.tsx
@@ -2,7 +2,11 @@ import '@app/styles.css';
 import { VideoProvider } from '@app/shared/react/providers';
 import { VideoSkinComponent } from '@app/shared/react/skins';
 import { Storyboard } from '@app/shared/react/storyboard';
+import { useAutoplay } from '@app/shared/react/use-autoplay';
+import { useLoop } from '@app/shared/react/use-loop';
+import { useMuted } from '@app/shared/react/use-muted';
 import { usePoster } from '@app/shared/react/use-poster';
+import { usePreload } from '@app/shared/react/use-preload';
 import { useSkin } from '@app/shared/react/use-skin';
 import { useSource } from '@app/shared/react/use-source';
 import { useStoryboard } from '@app/shared/react/use-storyboard';
@@ -22,11 +26,23 @@ function App() {
   const styling = useMemo(readStyling, []);
   const poster = usePoster();
   const storyboard = useStoryboard();
+  const autoplay = useAutoplay();
+  const muted = useMuted();
+  const loop = useLoop();
+  const preload = usePreload();
 
   return (
     <VideoProvider>
       <VideoSkinComponent poster={poster} skin={skin} styling={styling} className="aspect-video max-w-4xl mx-auto">
-        <Video src={SOURCES[source].url} playsInline crossOrigin="anonymous">
+        <Video
+          src={SOURCES[source].url}
+          autoPlay={autoplay}
+          muted={muted}
+          loop={loop}
+          preload={preload}
+          playsInline
+          crossOrigin="anonymous"
+        >
           <Storyboard src={storyboard} />
         </Video>
       </VideoSkinComponent>
diff --git a/packages/core/src/core/index.ts b/packages/core/src/core/index.ts
index 7243824ca..a7176c90d 100644
--- a/packages/core/src/core/index.ts
+++ b/packages/core/src/core/index.ts
@@ -14,6 +14,8 @@ export * from './ui/error-dialog/error-dialog-core';
 export * from './ui/error-dialog/error-dialog-data-attrs';
 export * from './ui/fullscreen-button/fullscreen-button-core';
 export * from './ui/fullscreen-button/fullscreen-button-data-attrs';
+export * from './ui/live-button/live-button-core';
+export * from './ui/live-button/live-button-data-attrs';
 export * from './ui/mute-button/mute-button-core';
 export * from './ui/mute-button/mute-button-data-attrs';
 export * from './ui/pip-button/pip-button-core';
diff --git a/packages/core/src/core/ui/live-button/live-button-core.ts b/packages/core/src/core/ui/live-button/live-button-core.ts
new file mode 100644
index 000000000..af1d47f35
--- /dev/null
+++ b/packages/core/src/core/ui/live-button/live-button-core.ts
@@ -0,0 +1,164 @@
+import { createState } from '@videojs/store';
+import { defaults } from '@videojs/utils/object';
+import { isFunction } from '@videojs/utils/predicate';
+import type { NonNullableObject } from '@videojs/utils/types';
+
+import type { MediaBufferState, MediaLiveState, MediaTimeState } from '../../media/state';
+import type { ButtonState } from '../types';
+
+export interface LiveButtonProps {
+  /** Custom label for the button. */
+  label?: string | ((state: LiveButtonState) => string) | undefined;
+  /** Whether the button is disabled. */
+  disabled?: boolean | undefined;
+}
+
+/**
+ * Fallback offset (in seconds) from the end of the seekable window used to
+ * decide "at live edge" when `liveEdgeStart` is unavailable.
+ */
+const LIVE_EDGE_OFFSET = 10;
+
+/**
+ * Grace window (in seconds) before `liveEdgeStart` that still counts as
+ * "at the live edge". Absorbs the small gap between the player's initial
+ * playback position (e.g. hls.js `liveSyncDuration`) and the manifest's
+ * `HOLD-BACK`, so autoplay reliably reports live.
+ */
+const LIVE_EDGE_TOLERANCE = 5;
+
+/**
+ * Media state slice consumed by `LiveButtonCore` — composed by the HTML
+ * and React `LiveButton` adapters from the `live`, `time`, and `buffer`
+ * store slices.
+ */
+export type LiveButtonMediaState = Pick<MediaTimeState, 'currentTime' | 'seek'> &
+  Pick<MediaBufferState, 'seekable'> &
+  MediaLiveState;
+
+export interface LiveButtonState extends ButtonState {
+  /** Whether the stream is live (or DVR). */
+  live: boolean;
+  /** Whether playback is at the live edge. */
+  liveEdge: boolean;
+}
+
+/**
+ * Core state machine for a "Live" button. Indicates whether the player is
+ * playing at the live edge and seeks to the Seekable Live Edge when activated.
+ *
+ * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+ */
+export class LiveButtonCore {
+  /**
+   * Default visible text. Auto-inserted by `media-live-button` and `<LiveButton>`
+   * when no children are provided. Override globally for i18n:
+   *
+   * ```ts
+   * LiveButtonCore.defaultText = 'En Vivo';
+   * ```
+   */
+  static defaultText = 'Live';
+
+  static readonly defaultProps: NonNullableObject<LiveButtonProps> = {
+    label: '',
+    disabled: false,
+  };
+
+  readonly state = createState<LiveButtonState>({
+    live: false,
+    liveEdge: false,
+    label: '',
+  });
+
+  #props = { ...LiveButtonCore.defaultProps };
+  #media: LiveButtonMediaState | null = null;
+
+  constructor(props?: LiveButtonProps) {
+    if (props) this.setProps(props);
+  }
+
+  setProps(props: LiveButtonProps): void {
+    this.#props = defaults(props, LiveButtonCore.defaultProps);
+  }
+
+  getLabel(state: LiveButtonState): string {
+    const { label } = this.#props;
+
+    if (isFunction(label)) {
+      const customLabel = label(state);
+      if (customLabel) return customLabel;
+    } else if (label) {
+      return label;
+    }
+
+    if (state.liveEdge) return 'Playing live';
+    return 'Seek to live edge';
+  }
+
+  getAttrs(state: LiveButtonState) {
+    const inactive = this.#props.disabled || state.liveEdge;
+    return {
+      'aria-label': this.getLabel(state),
+      'aria-disabled': inactive ? 'true' : undefined,
+    };
+  }
+
+  setMedia(media: LiveButtonMediaState): void {
+    this.#media = media;
+  }
+
+  getState(): LiveButtonState {
+    const media = this.#media!;
+    const live = isLiveMedia(media);
+    const liveEdge = live && this.#isAtLiveEdge(media);
+
+    this.state.patch({ live, liveEdge });
+    this.state.patch({ label: this.getLabel(this.state.current) });
+
+    return this.state.current;
+  }
+
+  /** Seek to the Seekable Live Edge. No-op when not live or already at edge. */
+  async seekToLive(media: LiveButtonMediaState): Promise<void> {
+    if (this.#props.disabled) return;
+    if (!isLiveMedia(media)) return;
+    if (this.#isAtLiveEdge(media)) return;
+
+    const target = liveEdgeTarget(media);
+    if (target == null) return;
+
+    await media.seek(target);
+  }
+
+  #isAtLiveEdge(media: LiveButtonMediaState): boolean {
+    const { currentTime, liveEdgeStart } = media;
+    if (Number.isFinite(liveEdgeStart)) {
+      return currentTime >= liveEdgeStart - LIVE_EDGE_TOLERANCE;
+    }
+
+    // Fallback: treat the trailing `LIVE_EDGE_OFFSET` window as the live edge.
+    const target = liveEdgeTarget(media);
+    if (target == null) return false;
+    return currentTime >= target - LIVE_EDGE_OFFSET;
+  }
+}
+
+export namespace LiveButtonCore {
+  export type Props = LiveButtonProps;
+  export type State = LiveButtonState;
+  export type MediaState = LiveButtonMediaState;
+}
+
+function isLiveMedia(media: LiveButtonMediaState): boolean {
+  // `targetLiveWindow` is `0` for low-latency live, `Infinity` for DVR, and
+  // `NaN` for on-demand or unknown — finite-or-infinite means live.
+  return !Number.isNaN(media.targetLiveWindow);
+}
+
+function liveEdgeTarget(media: LiveButtonMediaState): number | null {
+  const { seekable } = media;
+  if (seekable.length === 0) return null;
+  const end = seekable[seekable.length - 1]![1];
+  return Number.isFinite(end) ? end : null;
+}
diff --git a/packages/core/src/core/ui/live-button/live-button-data-attrs.ts b/packages/core/src/core/ui/live-button/live-button-data-attrs.ts
new file mode 100644
index 000000000..84abc668e
--- /dev/null
+++ b/packages/core/src/core/ui/live-button/live-button-data-attrs.ts
@@ -0,0 +1,9 @@
+import type { StateAttrMap } from '../types';
+import type { LiveButtonState } from './live-button-core';
+
+export const LiveButtonDataAttrs = {
+  /** Present when the stream is live (or DVR). */
+  live: 'data-live',
+  /** Present when playback is at the live edge. */
+  liveEdge: 'data-live-edge',
+} as const satisfies StateAttrMap<LiveButtonState>;
diff --git a/packages/core/src/core/ui/live-button/tests/live-button-core.test.ts b/packages/core/src/core/ui/live-button/tests/live-button-core.test.ts
new file mode 100644
index 000000000..d69ea2ba9
--- /dev/null
+++ b/packages/core/src/core/ui/live-button/tests/live-button-core.test.ts
@@ -0,0 +1,256 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import type { LiveButtonMediaState, LiveButtonState } from '../live-button-core';
+import { LiveButtonCore } from '../live-button-core';
+
+function createMediaState(overrides: Partial<LiveButtonMediaState> = {}): LiveButtonMediaState {
+  return {
+    currentTime: 0,
+    seekable: [],
+    liveEdgeStart: Number.NaN,
+    targetLiveWindow: Number.NaN,
+    seek: vi.fn(async (time: number) => time),
+    ...overrides,
+  };
+}
+
+function createState(overrides: Partial<LiveButtonState> = {}): LiveButtonState {
+  return {
+    live: false,
+    liveEdge: false,
+    label: '',
+    ...overrides,
+  };
+}
+
+describe('LiveButtonCore', () => {
+  describe('setProps', () => {
+    it('uses default props', () => {
+      const core = new LiveButtonCore();
+      const attrs = core.getAttrs(createState());
+      expect(attrs['aria-disabled']).toBeUndefined();
+    });
+
+    it('accepts constructor props', () => {
+      const core = new LiveButtonCore({ disabled: true });
+      const attrs = core.getAttrs(createState());
+      expect(attrs['aria-disabled']).toBe('true');
+    });
+  });
+
+  describe('getState', () => {
+    it('reports not-live when stream is on-demand', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(createMediaState({ targetLiveWindow: Number.NaN }));
+      const state = core.getState();
+      expect(state.live).toBe(false);
+      expect(state.liveEdge).toBe(false);
+    });
+
+    it('reports live for low-latency live (`targetLiveWindow === 0`)', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(createMediaState({ targetLiveWindow: 0, seekable: [[0, 100]], liveEdgeStart: 95 }));
+      const state = core.getState();
+      expect(state.live).toBe(true);
+    });
+
+    it('reports live for DVR (`targetLiveWindow === Infinity`)', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: Number.POSITIVE_INFINITY,
+          seekable: [[0, 1000]],
+          liveEdgeStart: 990,
+        })
+      );
+      expect(core.getState().live).toBe(true);
+    });
+
+    it('flags liveEdge when currentTime >= liveEdgeStart', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: 0,
+          seekable: [[0, 100]],
+          liveEdgeStart: 95,
+          currentTime: 96,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(true);
+    });
+
+    it('clears liveEdge when behind live', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: Number.POSITIVE_INFINITY,
+          seekable: [[0, 100]],
+          liveEdgeStart: 95,
+          currentTime: 50,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(false);
+    });
+
+    it('falls back to seekable end when liveEdgeStart is unknown', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: 0,
+          seekable: [[0, 100]],
+          liveEdgeStart: Number.NaN,
+          currentTime: 95,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(true);
+    });
+
+    it('clears liveEdge when behind the default 10s offset fallback', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: 0,
+          seekable: [[0, 100]],
+          liveEdgeStart: Number.NaN,
+          currentTime: 89,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(false);
+    });
+
+    it('flags liveEdge within the default 5s tolerance before liveEdgeStart', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: 0,
+          seekable: [[0, 100]],
+          liveEdgeStart: 95,
+          currentTime: 91,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(true);
+    });
+
+    it('clears liveEdge when beyond the tolerance before liveEdgeStart', () => {
+      const core = new LiveButtonCore();
+      core.setMedia(
+        createMediaState({
+          targetLiveWindow: 0,
+          seekable: [[0, 100]],
+          liveEdgeStart: 95,
+          currentTime: 89,
+        })
+      );
+      expect(core.getState().liveEdge).toBe(false);
+    });
+  });
+
+  describe('getLabel', () => {
+    it('returns "Seek to live edge" when behind live', () => {
+      const core = new LiveButtonCore();
+      expect(core.getLabel(createState({ live: true, liveEdge: false }))).toBe('Seek to live edge');
+    });
+
+    it('returns "Playing live" when at live edge', () => {
+      const core = new LiveButtonCore();
+      expect(core.getLabel(createState({ live: true, liveEdge: true }))).toBe('Playing live');
+    });
+
+    it('returns custom string label', () => {
+      const core = new LiveButtonCore({ label: 'LIVE' });
+      expect(core.getLabel(createState())).toBe('LIVE');
+    });
+
+    it('returns custom function label', () => {
+      const core = new LiveButtonCore({ label: (state) => (state.liveEdge ? 'LIVE' : 'GO LIVE') });
+      expect(core.getLabel(createState({ liveEdge: true }))).toBe('LIVE');
+      expect(core.getLabel(createState({ liveEdge: false }))).toBe('GO LIVE');
+    });
+  });
+
+  describe('getAttrs', () => {
+    it('sets aria-disabled when at live edge', () => {
+      const core = new LiveButtonCore();
+      const attrs = core.getAttrs(createState({ liveEdge: true, live: true }));
+      expect(attrs['aria-disabled']).toBe('true');
+    });
+
+    it('sets aria-disabled when disabled', () => {
+      const core = new LiveButtonCore({ disabled: true });
+      const attrs = core.getAttrs(createState({ live: true }));
+      expect(attrs['aria-disabled']).toBe('true');
+    });
+  });
+
+  describe('seekToLive', () => {
+    it('seeks to the end of the latest seekable range', async () => {
+      const core = new LiveButtonCore();
+      const media = createMediaState({
+        targetLiveWindow: 0,
+        seekable: [[0, 100]],
+        liveEdgeStart: 95,
+        currentTime: 50,
+      });
+      await core.seekToLive(media);
+      expect(media.seek).toHaveBeenCalledWith(100);
+    });
+
+    it('uses the last seekable range when multiple are present', async () => {
+      const core = new LiveButtonCore();
+      const media = createMediaState({
+        targetLiveWindow: 0,
+        seekable: [
+          [0, 50],
+          [60, 200],
+        ],
+        liveEdgeStart: 195,
+        currentTime: 70,
+      });
+      await core.seekToLive(media);
+      expect(media.seek).toHaveBeenCalledWith(200);
+    });
+
+    it('does nothing when stream is not live', async () => {
+      const core = new LiveButtonCore();
+      const media = createMediaState({ targetLiveWindow: Number.NaN });
+      await core.seekToLive(media);
+      expect(media.seek).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when already at live edge', async () => {
+      const core = new LiveButtonCore();
+      const media = createMediaState({
+        targetLiveWindow: 0,
+        seekable: [[0, 100]],
+        liveEdgeStart: 95,
+        currentTime: 99,
+      });
+      await core.seekToLive(media);
+      expect(media.seek).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when disabled', async () => {
+      const core = new LiveButtonCore({ disabled: true });
+      const media = createMediaState({
+        targetLiveWindow: 0,
+        seekable: [[0, 100]],
+        liveEdgeStart: 95,
+        currentTime: 50,
+      });
+      await core.seekToLive(media);
+      expect(media.seek).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when seekable is empty', async () => {
+      const core = new LiveButtonCore();
+      const media = createMediaState({
+        targetLiveWindow: 0,
+        seekable: [],
+        liveEdgeStart: Number.NaN,
+        currentTime: 0,
+      });
+      await core.seekToLive(media);
+      expect(media.seek).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/core/src/dom/media/hls/live.ts b/packages/core/src/dom/media/hls/live.ts
index e315de257..37712bb0d 100644
--- a/packages/core/src/dom/media/hls/live.ts
+++ b/packages/core/src/dom/media/hls/live.ts
@@ -1,21 +1,35 @@
 import type { Constructor } from '@videojs/utils/types';
 import type { LevelLoadedData } from 'hls.js';
 import Hls from 'hls.js';
-import type { HlsEngineHost } from './types';
+import { MediaStreamTypes } from '../../../core/media/types';
+import type { HlsEngineHost, HlsPlaylistTypes } from './types';
 
 export function HlsJsMediaLiveMixin<Base extends Constructor<HlsEngineHost>>(BaseClass: Base) {
   class HlsJsMediaLive extends (BaseClass as Constructor<HlsEngineHost>) {
     #targetLiveWindow = Number.NaN;
     #liveEdgeStartOffset: number | undefined;
+    #seekToLiveAbort: AbortController | null = null;
+    #seekToLivePending = false;
 
     constructor(...args: any[]) {
       super(...args);
 
       const { engine } = this;
-      engine?.on(Hls.Events.MANIFEST_LOADING, () => this.#reset());
-      engine?.on(Hls.Events.DESTROYING, () => this.#reset());
+      engine?.on(Hls.Events.MANIFEST_LOADING, () => {
+        this.#reset();
+        this.#armSeekToLive();
+      });
+      engine?.on(Hls.Events.MEDIA_ATTACHED, () => this.#armSeekToLive());
+      engine?.on(Hls.Events.MEDIA_DETACHED, () => this.#disarmSeekToLive());
+      engine?.on(Hls.Events.DESTROYING, () => {
+        this.#reset();
+        this.#disarmSeekToLive();
+      });
       engine?.on(Hls.Events.LEVEL_LOADED, (_event: string, data: LevelLoadedData) => {
         this.#derive(data.details);
+        // For `preload="none"`/`"metadata"` the manifest only loads after the
+        // first play, so retry the seek once `liveEdgeStart` becomes finite.
+        if (this.#seekToLivePending) this.#trySeekToLive();
       });
     }
 
@@ -36,19 +50,11 @@ export function HlsJsMediaLiveMixin<Base extends Constructor<HlsEngineHost>>(Bas
     #derive(details: LevelLoadedData['details']) {
       if (!details.live) return this.#reset();
 
-      // `EVENT` playlists retain all segments, so the seekable window can grow
-      // without bound (DVR). Standard live keeps a fixed sliding window.
-      const targetLiveWindow = details.type === 'EVENT' ? Number.POSITIVE_INFINITY : 0;
-
-      // Prefer manifest-declared HOLD-BACK / PART-HOLD-BACK when present;
-      // otherwise fall back to the per-spec multiples of the target durations.
-      // See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-12
-      const lowLatency = !!details.partList?.length;
-      this.#liveEdgeStartOffset = lowLatency
-        ? details.partHoldBack || details.partTarget * 2
-        : details.holdBack || details.targetduration * 3;
+      const info = getStreamInfoFromHlsjsLevelDetails(details);
 
-      this.#setTargetLiveWindow(targetLiveWindow);
+      this.#liveEdgeStartOffset = info.liveEdgeStartOffset;
+      this.#updateConfig(info);
+      this.#setTargetLiveWindow(info.targetLiveWindow);
     }
 
     #reset() {
@@ -56,13 +62,106 @@ export function HlsJsMediaLiveMixin<Base extends Constructor<HlsEngineHost>>(Bas
       this.#setTargetLiveWindow(Number.NaN);
     }
 
+    #updateConfig({ streamType, lowLatency }: StreamInfo) {
+      if (streamType === MediaStreamTypes.LIVE) {
+        // Update hls.js config for live/ll-live
+        const hls = this.engine;
+        if (!hls) return;
+
+        if (lowLatency) {
+          hls.config.backBufferLength = hls.userConfig.backBufferLength ?? 4;
+          hls.config.maxFragLookUpTolerance = hls.userConfig.maxFragLookUpTolerance ?? 0.001;
+          // For ll-hls, ensure that up switches are weighted the same as down switches to mitigate
+          // cases of getting stuck at lower bitrates.
+          hls.config.abrBandWidthUpFactor = hls.userConfig.abrBandWidthUpFactor ?? hls.config.abrBandWidthFactor;
+        } else {
+          hls.config.backBufferLength = hls.userConfig.backBufferLength ?? 8;
+        }
+      }
+    }
+
     #setTargetLiveWindow(value: number) {
       if (Object.is(this.#targetLiveWindow, value)) return;
       this.#targetLiveWindow = value;
       this.dispatchEvent(new Event('targetlivewindowchange'));
     }
+
+    /**
+     * Arm a one-shot seek-to-live on the first user-initiated `play`. Skipped
+     * when `autoplay` is set, since hls.js positions at the live edge during
+     * its own startup sequence and a programmatic seek would race that.
+     */
+    #armSeekToLive() {
+      this.#disarmSeekToLive();
+
+      const target = this.target as HTMLMediaElement | null;
+      if (!target || target.autoplay) return;
+
+      this.#seekToLiveAbort = new AbortController();
+      target.addEventListener(
+        'play',
+        () => {
+          this.#seekToLivePending = true;
+          this.#trySeekToLive();
+        },
+        { signal: this.#seekToLiveAbort.signal, once: true }
+      );
+    }
+
+    #disarmSeekToLive() {
+      this.#seekToLiveAbort?.abort();
+      this.#seekToLiveAbort = null;
+      this.#seekToLivePending = false;
+    }
+
+    #trySeekToLive() {
+      const target = this.target as HTMLMediaElement | null;
+      if (!target) return;
+      const { liveEdgeStart } = this;
+      if (!Number.isFinite(liveEdgeStart)) return;
+
+      if (target.currentTime < liveEdgeStart) {
+        target.currentTime = liveEdgeStart;
+      }
+      this.#seekToLivePending = false;
+    }
   }
 
   return HlsJsMediaLive as unknown as Base &
     Constructor<{ readonly liveEdgeStart: number; readonly targetLiveWindow: number }>;
 }
+
+type StreamInfo = ReturnType<typeof getStreamInfoFromHlsjsLevelDetails>;
+
+const getStreamInfoFromHlsjsLevelDetails = (levelDetails: LevelLoadedData['details']) => {
+  const playlistType: HlsPlaylistTypes = levelDetails.type as HlsPlaylistTypes;
+  const streamType = toStreamTypeFromPlaylistType(playlistType);
+  const targetLiveWindow = toTargetLiveWindowFromPlaylistType(playlistType);
+  const lowLatency = !!levelDetails.partList?.length;
+  let liveEdgeStartOffset: number | undefined;
+  if (streamType === MediaStreamTypes.LIVE) {
+    // Prefer manifest-declared HOLD-BACK / PART-HOLD-BACK when present;
+    // otherwise fall back to the per-spec multiples of the target durations.
+    // See https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-12
+    liveEdgeStartOffset = lowLatency
+      ? levelDetails.partHoldBack || levelDetails.partTarget * 2
+      : levelDetails.holdBack || levelDetails.targetduration * 3;
+  }
+
+  return {
+    streamType,
+    targetLiveWindow,
+    liveEdgeStartOffset,
+    lowLatency,
+  };
+};
+
+const toStreamTypeFromPlaylistType = (playlistType: HlsPlaylistTypes) => {
+  return playlistType === 'VOD' ? MediaStreamTypes.ON_DEMAND : MediaStreamTypes.LIVE;
+};
+
+const toTargetLiveWindowFromPlaylistType = (playlistType: HlsPlaylistTypes) => {
+  if (playlistType === 'EVENT') return Number.POSITIVE_INFINITY;
+  if (playlistType === 'VOD') return Number.NaN;
+  return 0;
+};
diff --git a/packages/core/src/dom/media/hls/tests/live.test.ts b/packages/core/src/dom/media/hls/tests/live.test.ts
index 69488ca0c..d52a8ac5f 100644
--- a/packages/core/src/dom/media/hls/tests/live.test.ts
+++ b/packages/core/src/dom/media/hls/tests/live.test.ts
@@ -4,9 +4,11 @@ import { describe, expect, it, vi } from 'vitest';
 import { HlsJsMediaLiveMixin } from '../live';
 import type { HlsEngineHost } from '../types';
 
-function createEngine(): Hls {
+function createEngine(userConfig: Record<string, unknown> = {}): Hls {
   const listeners = new Map<string, Set<(...args: any[]) => void>>();
   return {
+    config: { ...userConfig },
+    userConfig: { ...userConfig },
     on(event: string, fn: (...args: any[]) => void) {
       if (!listeners.has(event)) listeners.set(event, new Set());
       listeners.get(event)!.add(fn);
@@ -212,6 +214,174 @@ describe('HlsJsMediaLiveMixin', () => {
     });
   });
 
+  describe('seek-to-live on first play', () => {
+    function emitManifestLoading(engine: Hls) {
+      (engine as any).emit(Hls.Events.MANIFEST_LOADING);
+    }
+
+    it('seeks to `liveEdgeStart` on the first `play` event', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18, targetduration: 6 }));
+
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(42);
+    });
+
+    it('does not seek when `autoplay` is set', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+      video.autoplay = true;
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(0);
+    });
+
+    it('only seeks on the first play (subsequent plays are ignored)', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      video.dispatchEvent(new Event('play'));
+      expect(video.currentTime).toBe(42);
+
+      video.currentTime = 30;
+      video.dispatchEvent(new Event('play'));
+      expect(video.currentTime).toBe(30);
+    });
+
+    it('does not seek backwards when already at or past the live edge', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      video.currentTime = 50;
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(50);
+    });
+
+    it('does not seek when stream is on-demand', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: false, type: 'VOD' }));
+
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(0);
+    });
+
+    it('defers the seek until `liveEdgeStart` becomes finite (preload="none")', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      // Manifest is requested at startup but `LEVEL_LOADED` only arrives after `play`.
+      emitManifestLoading(engine);
+      video.dispatchEvent(new Event('play'));
+      expect(video.currentTime).toBe(0);
+
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      expect(video.currentTime).toBe(42);
+    });
+
+    it('re-arms on a subsequent source load', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+      video.dispatchEvent(new Event('play'));
+      expect(video.currentTime).toBe(42);
+
+      video.currentTime = 0;
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(42);
+    });
+
+    it('disarms on `DESTROYING`', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      const video = setTargetSeekable(host, [[0, 60]]);
+
+      emitManifestLoading(engine);
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      (engine as any).emit(Hls.Events.DESTROYING);
+
+      video.dispatchEvent(new Event('play'));
+
+      expect(video.currentTime).toBe(0);
+    });
+  });
+
+  describe('hls.js config updates', () => {
+    it('applies low-latency defaults when partList is present', () => {
+      const engine = createEngine({ abrBandWidthFactor: 0.95 });
+      const host = new HlsJsMediaLive(engine);
+      setTargetSeekable(host, [[0, 60]]);
+
+      emitLevelLoaded(engine, levelDetails({ live: true, partList: [{}], partHoldBack: 2, partTarget: 0.5 }));
+
+      expect((engine as any).config.backBufferLength).toBe(4);
+      expect((engine as any).config.maxFragLookUpTolerance).toBe(0.001);
+      expect((engine as any).config.abrBandWidthUpFactor).toBe(0.95);
+    });
+
+    it('applies standard live defaults when partList is absent', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      setTargetSeekable(host, [[0, 60]]);
+
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      expect((engine as any).config.backBufferLength).toBe(8);
+    });
+
+    it('respects user-supplied overrides', () => {
+      const engine = createEngine({ backBufferLength: 30 });
+      const host = new HlsJsMediaLive(engine);
+      setTargetSeekable(host, [[0, 60]]);
+
+      emitLevelLoaded(engine, levelDetails({ live: true, holdBack: 18 }));
+
+      expect((engine as any).config.backBufferLength).toBe(30);
+    });
+
+    it('does not touch config for non-live streams', () => {
+      const engine = createEngine();
+      const host = new HlsJsMediaLive(engine);
+      setTargetSeekable(host, [[0, 60]]);
+
+      emitLevelLoaded(engine, levelDetails({ live: false, type: 'VOD' }));
+
+      expect((engine as any).config.backBufferLength).toBeUndefined();
+    });
+  });
+
   describe('reset', () => {
     it('resets on `MANIFEST_LOADING`', () => {
       const engine = createEngine();
diff --git a/packages/core/src/dom/media/hls/types.ts b/packages/core/src/dom/media/hls/types.ts
index 1eef9b130..801335727 100644
--- a/packages/core/src/dom/media/hls/types.ts
+++ b/packages/core/src/dom/media/hls/types.ts
@@ -1,5 +1,7 @@
 import type Hls from 'hls.js';
 
+export type HlsPlaylistTypes = 'VOD' | 'EVENT' | null | undefined;
+
 export interface HlsEngineHost extends EventTarget {
   readonly engine?: Hls | null;
   readonly target?: HTMLMediaElement | null;
diff --git a/packages/html/src/define/audio/ui.ts b/packages/html/src/define/audio/ui.ts
index 9b1cd07dd..d908036cc 100644
--- a/packages/html/src/define/audio/ui.ts
+++ b/packages/html/src/define/audio/ui.ts
@@ -4,6 +4,7 @@
 import { MediaContainerElement } from '../../media/container-element';
 import { GestureElement } from '../../ui/gesture/gesture-element';
 import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
 import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
 import { PlayButtonElement } from '../../ui/play-button/play-button-element';
 import { PlaybackRateButtonElement } from '../../ui/playback-rate-button/playback-rate-button-element';
@@ -31,6 +32,7 @@ defineTime();
 // Standalone elements.
 safeDefine(GestureElement);
 safeDefine(HotkeyElement);
+safeDefine(LiveButtonElement);
 safeDefine(MuteButtonElement);
 safeDefine(PlayButtonElement);
 safeDefine(PlaybackRateButtonElement);
diff --git a/packages/html/src/define/base.css b/packages/html/src/define/base.css
index d59f548f5..6c4476918 100644
--- a/packages/html/src/define/base.css
+++ b/packages/html/src/define/base.css
@@ -2,7 +2,8 @@
 /* Base                                                                       */
 /* -------------------------------------------------------------------------- */
 
-video-player {
+video-player,
+live-video-player {
   display: contents;
 }
 
@@ -11,13 +12,16 @@ Required to override any default video and image styles (such as
 Tailwind's CSS reset) and ensure they fill the container as expected.
 */
 video-player video,
-video-player [slot="poster"] {
+video-player [slot="poster"],
+live-video-player video,
+live-video-player [slot="poster"] {
   display: block;
   width: 100%;
   height: 100%;
 }
 
-video-player video::-webkit-media-text-track-container {
+video-player video::-webkit-media-text-track-container,
+live-video-player video::-webkit-media-text-track-container {
   z-index: 1;
   font-family: inherit;
   scale: 0.98;
diff --git a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
index f52b59e95..703e9e57a 100644
--- a/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/live-audio/minimal-skin.tailwind.ts
@@ -15,8 +15,8 @@ import { cn } from '@videojs/utils/style';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
-// Reuse the audio preset's minimal UI element registrations.
-import '../audio/minimal-ui';
+// Register the live audio player, container, and minimal UI custom elements.
+import './minimal-ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -46,6 +46,8 @@ function getTemplateHTML() {
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
               </media-play-button>
               <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+
+              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
           </div>
 
           <div class="grow" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-audio/minimal-skin.ts b/packages/html/src/define/live-audio/minimal-skin.ts
index 63f067888..7c616dd4c 100644
--- a/packages/html/src/define/live-audio/minimal-skin.ts
+++ b/packages/html/src/define/live-audio/minimal-skin.ts
@@ -4,8 +4,8 @@ import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './minimal-skin.css?inline';
 
-// Reuse the audio preset's minimal UI element registrations.
-import '../audio/minimal-ui';
+// Register the live audio player, container, and minimal UI custom elements.
+import './minimal-ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -35,6 +35,8 @@ function getTemplateHTML() {
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
             </media-play-button>
             <media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
+
+            <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
           </div>
 
           <div class="media-time-controls" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-audio/minimal-ui.ts b/packages/html/src/define/live-audio/minimal-ui.ts
new file mode 100644
index 000000000..40a907479
--- /dev/null
+++ b/packages/html/src/define/live-audio/minimal-ui.ts
@@ -0,0 +1,35 @@
+// Registers the live audio player, container, and all audio UI custom
+// elements used by the minimal skin without creating a skin element. Use
+// this entry when building an ejected (light DOM) player layout for live
+// HLS / DASH streams.
+import { MediaContainerElement } from '../../media/container-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
+import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
+import { PlayButtonElement } from '../../ui/play-button/play-button-element';
+import { PopoverElement } from '../../ui/popover/popover-element';
+import { TooltipElement } from '../../ui/tooltip/tooltip-element';
+import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
+import { safeDefine } from '../safe-define';
+import { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
+
+// Value import — player.ts body runs before this module's body.
+import { LiveAudioPlayerElement } from './player';
+
+// ── Registration (providers / parents first) ────────────────────────────
+
+safeDefine(LiveAudioPlayerElement);
+safeDefine(MediaContainerElement);
+
+// Compound groups.
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+
+// Standalone elements.
+safeDefine(LiveButtonElement);
+safeDefine(MuteButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PopoverElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
diff --git a/packages/html/src/define/live-audio/player.ts b/packages/html/src/define/live-audio/player.ts
new file mode 100644
index 000000000..990dcfa5b
--- /dev/null
+++ b/packages/html/src/define/live-audio/player.ts
@@ -0,0 +1,23 @@
+import { liveAudioFeatures } from '@videojs/core/dom';
+import { MediaContainerElement } from '../../media/container-element';
+import { createPlayer } from '../../player/create-player';
+import { MediaElement } from '../../ui/media-element';
+import { safeDefine } from '../safe-define';
+
+const { ProviderMixin } = createPlayer({
+  features: liveAudioFeatures,
+});
+
+export class LiveAudioPlayerElement extends ProviderMixin(MediaElement) {
+  static readonly tagName = 'live-audio-player';
+}
+
+// Provider must be defined before consumer for context handshake during upgrade.
+safeDefine(LiveAudioPlayerElement);
+safeDefine(MediaContainerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveAudioPlayerElement.tagName]: LiveAudioPlayerElement;
+  }
+}
diff --git a/packages/html/src/define/live-audio/skin.tailwind.ts b/packages/html/src/define/live-audio/skin.tailwind.ts
index a84560738..47eba5776 100644
--- a/packages/html/src/define/live-audio/skin.tailwind.ts
+++ b/packages/html/src/define/live-audio/skin.tailwind.ts
@@ -15,8 +15,8 @@ import { cn } from '@videojs/utils/style';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
-// Reuse the audio preset's UI element registrations.
-import '../audio/ui';
+// Register the live audio player, container, and all UI custom elements.
+import './ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -46,6 +46,8 @@ function getTemplateHTML() {
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
               </media-play-button>
               <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+
+              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
           </div>
 
           <div class="grow" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-audio/skin.ts b/packages/html/src/define/live-audio/skin.ts
index ee0cee7aa..9a7d51c5c 100644
--- a/packages/html/src/define/live-audio/skin.ts
+++ b/packages/html/src/define/live-audio/skin.ts
@@ -4,8 +4,8 @@ import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './skin.css?inline';
 
-// Reuse the audio preset's UI element registrations.
-import '../audio/ui';
+// Register the live audio player, container, and all UI custom elements.
+import './ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -35,6 +35,8 @@ function getTemplateHTML() {
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
             </media-play-button>
             <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+
+            <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
           </div>
 
           <div class="media-time-controls" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-audio/ui.ts b/packages/html/src/define/live-audio/ui.ts
new file mode 100644
index 000000000..6854ffcd9
--- /dev/null
+++ b/packages/html/src/define/live-audio/ui.ts
@@ -0,0 +1,38 @@
+// Registers the live audio player, container, and all audio UI custom
+// elements without creating a skin element. Use this entry when building an
+// ejected (light DOM) player layout for live HLS / DASH streams.
+import { MediaContainerElement } from '../../media/container-element';
+import { GestureElement } from '../../ui/gesture/gesture-element';
+import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
+import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
+import { PlayButtonElement } from '../../ui/play-button/play-button-element';
+import { PopoverElement } from '../../ui/popover/popover-element';
+import { TooltipElement } from '../../ui/tooltip/tooltip-element';
+import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
+import { safeDefine } from '../safe-define';
+import { defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
+
+// Value import — player.ts body runs before this module's body.
+import { LiveAudioPlayerElement } from './player';
+
+// ── Registration (providers / parents first) ────────────────────────────
+
+safeDefine(LiveAudioPlayerElement);
+safeDefine(MediaContainerElement);
+
+// Compound groups.
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+
+// Standalone elements.
+safeDefine(GestureElement);
+safeDefine(HotkeyElement);
+safeDefine(LiveButtonElement);
+safeDefine(MuteButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PopoverElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
diff --git a/packages/html/src/define/live-video/minimal-skin.tailwind.ts b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
index 3634e38a2..96ffd98a1 100644
--- a/packages/html/src/define/live-video/minimal-skin.tailwind.ts
+++ b/packages/html/src/define/live-video/minimal-skin.tailwind.ts
@@ -19,8 +19,8 @@ import { cn } from '@videojs/utils/style';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
-// Reuse the video preset's minimal UI element registrations.
-import '../video/minimal-ui';
+// Register the live video player, container, and minimal UI custom elements.
+import './minimal-ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -58,6 +58,8 @@ function getTemplateHTML() {
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
               </media-play-button>
               <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+
+              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
           </div>
 
           <div class="grow" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-video/minimal-skin.ts b/packages/html/src/define/live-video/minimal-skin.ts
index b2945b218..353f51d48 100644
--- a/packages/html/src/define/live-video/minimal-skin.ts
+++ b/packages/html/src/define/live-video/minimal-skin.ts
@@ -4,8 +4,8 @@ import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './minimal-skin.css?inline';
 
-// Reuse the video preset's minimal UI element registrations.
-import '../video/minimal-ui';
+// Register the live video player, container, and minimal UI custom elements.
+import './minimal-ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -43,6 +43,8 @@ function getTemplateHTML() {
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
             </media-play-button>
             <media-tooltip id="play-tooltip" side="top" class="media-tooltip"></media-tooltip>
+
+            <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
           </div>
 
           <div class="media-time-controls" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-video/minimal-ui.ts b/packages/html/src/define/live-video/minimal-ui.ts
new file mode 100644
index 000000000..479b01ecb
--- /dev/null
+++ b/packages/html/src/define/live-video/minimal-ui.ts
@@ -0,0 +1,48 @@
+// Registers the live video player, container, and all video UI custom
+// elements used by the minimal skin without creating a skin element. Use
+// this entry when building an ejected (light DOM) player layout for live
+// HLS / DASH streams.
+import { MediaContainerElement } from '../../media/container-element';
+import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
+import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
+import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
+import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
+import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
+import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
+import { PlayButtonElement } from '../../ui/play-button/play-button-element';
+import { PopoverElement } from '../../ui/popover/popover-element';
+import { PosterElement } from '../../ui/poster/poster-element';
+import { TooltipElement } from '../../ui/tooltip/tooltip-element';
+import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
+import { safeDefine } from '../safe-define';
+import { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
+
+// Value import — player.ts body runs before this module's body.
+import { LiveVideoPlayerElement } from './player';
+
+// ── Registration (providers / parents first) ────────────────────────────
+
+safeDefine(LiveVideoPlayerElement);
+safeDefine(MediaContainerElement);
+
+// Compound groups.
+defineControls();
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+
+// Standalone elements.
+safeDefine(BufferingIndicatorElement);
+safeDefine(CaptionsButtonElement);
+safeDefine(CastButtonElement);
+safeDefine(FullscreenButtonElement);
+safeDefine(LiveButtonElement);
+safeDefine(MuteButtonElement);
+safeDefine(PiPButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PopoverElement);
+safeDefine(PosterElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
diff --git a/packages/html/src/define/live-video/player.ts b/packages/html/src/define/live-video/player.ts
new file mode 100644
index 000000000..3b56bca1a
--- /dev/null
+++ b/packages/html/src/define/live-video/player.ts
@@ -0,0 +1,23 @@
+import { liveVideoFeatures } from '@videojs/core/dom';
+import { MediaContainerElement } from '../../media/container-element';
+import { createPlayer } from '../../player/create-player';
+import { MediaElement } from '../../ui/media-element';
+import { safeDefine } from '../safe-define';
+
+const { ProviderMixin } = createPlayer({
+  features: liveVideoFeatures,
+});
+
+export class LiveVideoPlayerElement extends ProviderMixin(MediaElement) {
+  static readonly tagName = 'live-video-player';
+}
+
+// Provider must be defined before consumer for context handshake during upgrade.
+safeDefine(LiveVideoPlayerElement);
+safeDefine(MediaContainerElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [LiveVideoPlayerElement.tagName]: LiveVideoPlayerElement;
+  }
+}
diff --git a/packages/html/src/define/live-video/skin.tailwind.ts b/packages/html/src/define/live-video/skin.tailwind.ts
index 32aec8082..e7ee88a15 100644
--- a/packages/html/src/define/live-video/skin.tailwind.ts
+++ b/packages/html/src/define/live-video/skin.tailwind.ts
@@ -19,8 +19,8 @@ import { cn } from '@videojs/utils/style';
 import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 
-// Reuse the video preset's UI element registrations.
-import '../video/ui';
+// Register the live video player, container, and all UI custom elements.
+import './ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -60,6 +60,8 @@ function getTemplateHTML() {
                 ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })}
               </media-play-button>
               <media-tooltip id="play-tooltip" side="top" class="${cn(popup.tooltip)}"></media-tooltip>
+
+              <media-live-button class="${cn(button.base, button.subtle, button.live)}"></media-live-button>
           </div>
 
           <div class="grow" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-video/skin.ts b/packages/html/src/define/live-video/skin.ts
index d051dedec..5fbc24300 100644
--- a/packages/html/src/define/live-video/skin.ts
+++ b/packages/html/src/define/live-video/skin.ts
@@ -4,9 +4,8 @@ import { safeDefine } from '../safe-define';
 import { SkinElement } from '../skin-element';
 import styles from './skin.css?inline';
 
-// Reuse the video preset's UI element registrations (player, container,
-// controls, buttons, etc.) — the live variant only differs in its template.
-import '../video/ui';
+// Register the live video player, container, and all UI custom elements.
+import './ui';
 
 function getTemplateHTML() {
   return /*html*/ `
@@ -46,6 +45,8 @@ function getTemplateHTML() {
               ${renderIcon('pause', { class: 'media-icon media-icon--pause' })}
             </media-play-button>
             <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip"></media-tooltip>
+
+            <media-live-button class="media-button media-button--subtle media-button--live"></media-live-button>
           </div>
 
           <div class="media-time-controls" aria-hidden="true"></div>
diff --git a/packages/html/src/define/live-video/ui.ts b/packages/html/src/define/live-video/ui.ts
new file mode 100644
index 000000000..b25d2f4d7
--- /dev/null
+++ b/packages/html/src/define/live-video/ui.ts
@@ -0,0 +1,51 @@
+// Registers the live video player, container, and all video UI custom
+// elements without creating a skin element. Use this entry when building an
+// ejected (light DOM) player layout for live HLS / DASH streams.
+import { MediaContainerElement } from '../../media/container-element';
+import { BufferingIndicatorElement } from '../../ui/buffering-indicator/buffering-indicator-element';
+import { CaptionsButtonElement } from '../../ui/captions-button/captions-button-element';
+import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
+import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
+import { GestureElement } from '../../ui/gesture/gesture-element';
+import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
+import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
+import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
+import { PlayButtonElement } from '../../ui/play-button/play-button-element';
+import { PopoverElement } from '../../ui/popover/popover-element';
+import { PosterElement } from '../../ui/poster/poster-element';
+import { TooltipElement } from '../../ui/tooltip/tooltip-element';
+import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';
+import { safeDefine } from '../safe-define';
+import { defineControls, defineErrorDialog, defineTime, defineTimeSlider, defineVolumeSlider } from '../ui/compounds';
+
+// Value import — player.ts body runs before this module's body.
+import { LiveVideoPlayerElement } from './player';
+
+// ── Registration (providers / parents first) ────────────────────────────
+
+safeDefine(LiveVideoPlayerElement);
+safeDefine(MediaContainerElement);
+
+// Compound groups.
+defineControls();
+defineErrorDialog();
+defineTimeSlider();
+defineVolumeSlider();
+defineTime();
+
+// Standalone elements.
+safeDefine(BufferingIndicatorElement);
+safeDefine(CaptionsButtonElement);
+safeDefine(CastButtonElement);
+safeDefine(FullscreenButtonElement);
+safeDefine(GestureElement);
+safeDefine(HotkeyElement);
+safeDefine(LiveButtonElement);
+safeDefine(MuteButtonElement);
+safeDefine(PiPButtonElement);
+safeDefine(PlayButtonElement);
+safeDefine(PopoverElement);
+safeDefine(PosterElement);
+safeDefine(TooltipElement);
+safeDefine(TooltipGroupElement);
diff --git a/packages/html/src/define/video/ui.ts b/packages/html/src/define/video/ui.ts
index 2f19f9393..3eb3afa3d 100644
--- a/packages/html/src/define/video/ui.ts
+++ b/packages/html/src/define/video/ui.ts
@@ -8,6 +8,7 @@ import { CastButtonElement } from '../../ui/cast-button/cast-button-element';
 import { FullscreenButtonElement } from '../../ui/fullscreen-button/fullscreen-button-element';
 import { GestureElement } from '../../ui/gesture/gesture-element';
 import { HotkeyElement } from '../../ui/hotkey/hotkey-element';
+import { LiveButtonElement } from '../../ui/live-button/live-button-element';
 import { MuteButtonElement } from '../../ui/mute-button/mute-button-element';
 import { PiPButtonElement } from '../../ui/pip-button/pip-button-element';
 import { PlayButtonElement } from '../../ui/play-button/play-button-element';
@@ -42,6 +43,7 @@ safeDefine(CastButtonElement);
 safeDefine(FullscreenButtonElement);
 safeDefine(GestureElement);
 safeDefine(HotkeyElement);
+safeDefine(LiveButtonElement);
 safeDefine(MuteButtonElement);
 safeDefine(PiPButtonElement);
 safeDefine(PlayButtonElement);
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index 16885848f..261819b0b 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -41,6 +41,7 @@ export { FullscreenButtonElement } from './ui/fullscreen-button/fullscreen-butto
 export { GestureElement } from './ui/gesture/gesture-element';
 export { AriaKeyShortcutsController } from './ui/hotkey/aria-key-shortcuts-controller';
 export { HotkeyElement } from './ui/hotkey/hotkey-element';
+export { LiveButtonElement } from './ui/live-button/live-button-element';
 export { MediaButtonElement } from './ui/media-button-element';
 // Primitives
 export * from './ui/media-element';
diff --git a/packages/html/src/presets/live-audio.ts b/packages/html/src/presets/live-audio.ts
index cc4673a89..bde609896 100644
--- a/packages/html/src/presets/live-audio.ts
+++ b/packages/html/src/presets/live-audio.ts
@@ -1,6 +1,7 @@
-/** Live audio player preset — same features as `audio` with a skin that omits duration / current-time displays. */
+/** Live audio player preset — `liveAudioFeatures` (adds `liveFeature`, drops `playbackRateFeature`) with a skin that includes a Live button. */
 export { liveAudioFeatures } from '@videojs/core/dom';
 export { MinimalLiveAudioSkinElement } from '../define/live-audio/minimal-skin';
 export { MinimalLiveAudioSkinTailwindElement } from '../define/live-audio/minimal-skin.tailwind';
+export { LiveAudioPlayerElement } from '../define/live-audio/player';
 export { LiveAudioSkinElement } from '../define/live-audio/skin';
 export { LiveAudioSkinTailwindElement } from '../define/live-audio/skin.tailwind';
diff --git a/packages/html/src/presets/live-video.ts b/packages/html/src/presets/live-video.ts
index 2bd5fc460..63f61727b 100644
--- a/packages/html/src/presets/live-video.ts
+++ b/packages/html/src/presets/live-video.ts
@@ -1,6 +1,7 @@
-/** Live video player preset — same features as `video` with a skin that omits duration / current-time displays. */
+/** Live video player preset — `liveVideoFeatures` (adds `liveFeature`, drops `playbackRateFeature`) with a skin that includes a Live button. */
 export { liveVideoFeatures } from '@videojs/core/dom';
 export { MinimalLiveVideoSkinElement } from '../define/live-video/minimal-skin';
 export { MinimalLiveVideoSkinTailwindElement } from '../define/live-video/minimal-skin.tailwind';
+export { LiveVideoPlayerElement } from '../define/live-video/player';
 export { LiveVideoSkinElement } from '../define/live-video/skin';
 export { LiveVideoSkinTailwindElement } from '../define/live-video/skin.tailwind';
diff --git a/packages/html/src/ui/live-button/live-button-element.ts b/packages/html/src/ui/live-button/live-button-element.ts
new file mode 100644
index 000000000..6bf849b07
--- /dev/null
+++ b/packages/html/src/ui/live-button/live-button-element.ts
@@ -0,0 +1,120 @@
+import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';
+import {
+  applyElementProps,
+  applyStateDataAttrs,
+  createButton,
+  logMissingFeature,
+  selectBuffer,
+  selectLive,
+  selectTime,
+} from '@videojs/core/dom';
+import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';
+import type { State } from '@videojs/store';
+
+import { playerContext } from '../../player/context';
+import { PlayerController } from '../../player/player-controller';
+import { MediaElement } from '../media-element';
+
+/**
+ * `<media-live-button>` — selects from `live`, `time`, and `buffer` features
+ * and composes them into the `LiveButtonMediaState` consumed by
+ * `LiveButtonCore`.
+ *
+ * Doesn't extend `MediaButtonElement` because that base couples a button to
+ * a single feature selector; the LiveButton needs three.
+ */
+export class LiveButtonElement extends MediaElement {
+  static readonly tagName = 'media-live-button';
+
+  static override properties: PropertyDeclarationMap = {
+    label: { type: String },
+    disabled: { type: Boolean },
+  };
+
+  disabled = false;
+  label = '';
+
+  protected readonly core = new LiveButtonCore();
+
+  protected readonly live = new PlayerController(this, playerContext, selectLive);
+  protected readonly time = new PlayerController(this, playerContext, selectTime);
+  protected readonly buffer = new PlayerController(this, playerContext, selectBuffer);
+
+  get $state(): State<LiveButtonCore.State> {
+    return this.core.state;
+  }
+
+  #disconnect: AbortController | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (this.destroyed) return;
+
+    if (!this.textContent?.trim()) {
+      this.textContent = LiveButtonCore.defaultText;
+    }
+
+    this.#disconnect = new AbortController();
+
+    const buttonProps = createButton({
+      onActivate: () => {
+        const media = this.#getMedia();
+        if (media) this.core.seekToLive(media);
+      },
+      isDisabled: () => this.disabled || !this.#getMedia(),
+    });
+
+    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
+
+    if (__DEV__ && !this.#getMedia()) {
+      logMissingFeature(this.localName, this.live.displayName ?? 'live');
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.#disconnect?.abort();
+    this.#disconnect = null;
+  }
+
+  /** Returns the button's current label derived from media state. */
+  getLabel(): string | undefined {
+    return this.core.state.current.label || undefined;
+  }
+
+  protected override willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed);
+    this.core.setProps(this);
+  }
+
+  protected override update(changed: PropertyValues): void {
+    super.update(changed);
+
+    const media = this.#getMedia();
+    if (!media) return;
+
+    this.core.setMedia(media);
+    const state = this.core.getState();
+    applyElementProps(this, this.core.getAttrs(state));
+    applyStateDataAttrs(this, state, LiveButtonDataAttrs);
+  }
+
+  /**
+   * Compose the LiveButton media state from the three feature slices.
+   * Returns `null` when any are missing so the button stays disabled until
+   * all three features are registered on the player.
+   */
+  #getMedia(): LiveButtonMediaState | null {
+    const live = this.live.value;
+    const time = this.time.value;
+    const buffer = this.buffer.value;
+    if (!live || !time || !buffer) return null;
+    return {
+      currentTime: time.currentTime,
+      seek: time.seek,
+      seekable: buffer.seekable,
+      liveEdgeStart: live.liveEdgeStart,
+      targetLiveWindow: live.targetLiveWindow,
+    };
+  }
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index fd7b7dd4f..a4f614255 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -47,6 +47,7 @@ export { useSlider } from './ui/hooks/use-slider';
 export { Hotkey, type HotkeyProps, MediaHotkey, type MediaHotkeyProps } from './ui/hotkey/hotkey';
 export { useAriaKeyShortcuts } from './ui/hotkey/use-aria-key-shortcuts';
 export { type UseHotkeyOptions, useHotkey } from './ui/hotkey/use-hotkey';
+export { LiveButton, type LiveButtonProps } from './ui/live-button/live-button';
 export { MuteButton, type MuteButtonProps } from './ui/mute-button/mute-button';
 export { PiPButton, type PiPButtonProps } from './ui/pip-button/pip-button';
 export { PlayButton, type PlayButtonProps } from './ui/play-button/play-button';
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
index 5a18cf8f7..884f4b8f7 100644
--- a/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/live-audio/minimal-skin.tailwind.tsx
@@ -14,6 +14,7 @@ import { type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@/icons/minimal';
 import { Container, usePlayer } from '@/player/context';
 import { ErrorDialog } from '@/ui/error-dialog';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PlayButton } from '@/ui/play-button';
 import { Popover } from '@/ui/popover';
@@ -128,6 +129,8 @@ export function MinimalLiveAudioSkinTailwind(props: MinimalLiveAudioSkinProps):
               />
               <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
             </Tooltip.Root>
+
+            <LiveButton className={cn(button.base, button.subtle, button.live)} />
           </div>
 
           <div className="grow" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-audio/minimal-skin.tsx b/packages/react/src/presets/live-audio/minimal-skin.tsx
index 4ac158782..c7e87a220 100644
--- a/packages/react/src/presets/live-audio/minimal-skin.tsx
+++ b/packages/react/src/presets/live-audio/minimal-skin.tsx
@@ -3,6 +3,7 @@ import { type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@/icons/minimal';
 import { Container, usePlayer } from '@/player/context';
 import { ErrorDialog } from '@/ui/error-dialog';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PlayButton } from '@/ui/play-button';
 import { Popover } from '@/ui/popover';
@@ -94,6 +95,8 @@ export function MinimalLiveAudioSkin(props: MinimalLiveAudioSkinProps): ReactNod
               />
               <Tooltip.Popup className="media-tooltip" />
             </Tooltip.Root>
+
+            <LiveButton className="media-button media-button--subtle media-button--live" />
           </div>
 
           <div className="media-time-controls" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-audio/skin.tailwind.tsx b/packages/react/src/presets/live-audio/skin.tailwind.tsx
index 97b0fe041..61883141c 100644
--- a/packages/react/src/presets/live-audio/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-audio/skin.tailwind.tsx
@@ -14,6 +14,7 @@ import { type ComponentProps, forwardRef, type ReactNode } from 'react';
 import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@/icons';
 import { Container, usePlayer } from '@/player/context';
 import { ErrorDialog } from '@/ui/error-dialog';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PlayButton } from '@/ui/play-button';
 import { Popover } from '@/ui/popover';
@@ -128,6 +129,8 @@ export function LiveAudioSkinTailwind(props: LiveAudioSkinProps): ReactNode {
               />
               <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
             </Tooltip.Root>
+
+            <LiveButton className={cn(button.base, button.subtle, button.live)} />
           </div>
 
           <div className="grow" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-audio/skin.tsx b/packages/react/src/presets/live-audio/skin.tsx
index deb81fa25..3fa5496be 100644
--- a/packages/react/src/presets/live-audio/skin.tsx
+++ b/packages/react/src/presets/live-audio/skin.tsx
@@ -4,6 +4,7 @@ import { PauseIcon, PlayIcon, RestartIcon, VolumeHighIcon, VolumeLowIcon, Volume
 import { Container, usePlayer } from '@/player/context';
 import { ErrorDialog } from '@/ui/error-dialog';
 import { Hotkey } from '@/ui/hotkey/hotkey';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PlayButton } from '@/ui/play-button';
 import { Popover } from '@/ui/popover';
@@ -94,6 +95,8 @@ export function LiveAudioSkin(props: LiveAudioSkinProps): ReactNode {
               />
               <Tooltip.Popup className="media-surface media-tooltip" />
             </Tooltip.Root>
+
+            <LiveButton className="media-button media-button--subtle media-button--live" />
           </div>
 
           <div className="media-time-controls" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
index e91b5927e..7920705e4 100644
--- a/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/minimal-skin.tailwind.tsx
@@ -40,6 +40,7 @@ import { CastButton } from '@/ui/cast-button';
 import { Controls } from '@/ui/controls';
 import { ErrorDialog } from '@/ui/error-dialog';
 import { FullscreenButton } from '@/ui/fullscreen-button';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PiPButton } from '@/ui/pip-button';
 import { PlayButton } from '@/ui/play-button';
@@ -176,6 +177,8 @@ export function MinimalLiveVideoSkinTailwind(props: MinimalLiveVideoSkinProps):
               />
               <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
             </Tooltip.Root>
+
+            <LiveButton className={cn(button.base, button.subtle, button.live)} />
           </div>
 
           <div className="grow" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-video/minimal-skin.tsx b/packages/react/src/presets/live-video/minimal-skin.tsx
index d8b087664..bb8da3bda 100644
--- a/packages/react/src/presets/live-video/minimal-skin.tsx
+++ b/packages/react/src/presets/live-video/minimal-skin.tsx
@@ -25,6 +25,7 @@ import { CastButton } from '@/ui/cast-button';
 import { Controls } from '@/ui/controls';
 import { ErrorDialog } from '@/ui/error-dialog';
 import { FullscreenButton } from '@/ui/fullscreen-button';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PiPButton } from '@/ui/pip-button';
 import { PlayButton } from '@/ui/play-button';
@@ -131,6 +132,8 @@ export function MinimalLiveVideoSkin(props: MinimalLiveVideoSkinProps): ReactNod
               />
               <Tooltip.Popup className="media-tooltip" />
             </Tooltip.Root>
+
+            <LiveButton className="media-button media-button--subtle media-button--live" />
           </div>
 
           <div className="media-time-controls" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-video/skin.tailwind.tsx b/packages/react/src/presets/live-video/skin.tailwind.tsx
index 60f1904ee..fc44df193 100644
--- a/packages/react/src/presets/live-video/skin.tailwind.tsx
+++ b/packages/react/src/presets/live-video/skin.tailwind.tsx
@@ -40,6 +40,7 @@ import { CastButton } from '@/ui/cast-button';
 import { Controls } from '@/ui/controls';
 import { ErrorDialog } from '@/ui/error-dialog';
 import { FullscreenButton } from '@/ui/fullscreen-button';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PiPButton } from '@/ui/pip-button';
 import { PlayButton } from '@/ui/play-button';
@@ -178,6 +179,8 @@ export function LiveVideoSkinTailwind(props: LiveVideoSkinProps): ReactNode {
               />
               <Tooltip.Popup className={cn(popup.tooltip)}></Tooltip.Popup>
             </Tooltip.Root>
+
+            <LiveButton className={cn(button.base, button.subtle, button.live)} />
           </div>
 
           <div className="grow" aria-hidden="true" />
diff --git a/packages/react/src/presets/live-video/skin.tsx b/packages/react/src/presets/live-video/skin.tsx
index 909abd38a..cb8e9fecd 100644
--- a/packages/react/src/presets/live-video/skin.tsx
+++ b/packages/react/src/presets/live-video/skin.tsx
@@ -27,6 +27,7 @@ import { ErrorDialog } from '@/ui/error-dialog';
 import { FullscreenButton } from '@/ui/fullscreen-button';
 import { Gesture } from '@/ui/gesture/gesture';
 import { Hotkey } from '@/ui/hotkey/hotkey';
+import { LiveButton } from '@/ui/live-button';
 import { MuteButton } from '@/ui/mute-button';
 import { PiPButton } from '@/ui/pip-button';
 import { PlayButton } from '@/ui/play-button';
@@ -134,6 +135,8 @@ export function LiveVideoSkin(props: LiveVideoSkinProps): ReactNode {
               />
               <Tooltip.Popup className="media-surface media-tooltip" />
             </Tooltip.Root>
+
+            <LiveButton className="media-button media-button--subtle media-button--live" />
           </div>
 
           <div className="media-time-controls" aria-hidden="true" />
diff --git a/packages/react/src/ui/live-button/index.ts b/packages/react/src/ui/live-button/index.ts
new file mode 100644
index 000000000..292fedbd7
--- /dev/null
+++ b/packages/react/src/ui/live-button/index.ts
@@ -0,0 +1 @@
+export { LiveButton, type LiveButtonProps } from './live-button';
diff --git a/packages/react/src/ui/live-button/live-button.tsx b/packages/react/src/ui/live-button/live-button.tsx
new file mode 100644
index 000000000..fe2068909
--- /dev/null
+++ b/packages/react/src/ui/live-button/live-button.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';
+import { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';
+import { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';
+
+import { usePlayer } from '../../player/context';
+import type { UIComponentProps } from '../../utils/types';
+import { renderElement } from '../../utils/use-render';
+import { useButton } from '../hooks/use-button';
+import { useOptionalTooltipContext } from '../tooltip/context';
+
+const DISPLAY_NAME = 'LiveButton';
+
+export interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}
+
+/**
+ * A button that indicates live status and seeks to the live edge when
+ * pressed. Exposes `data-live` while the stream is live (or DVR) and
+ * `data-live-edge` while playing at the live edge so skins can style a
+ * red-dot ↔ grey-dot treatment.
+ *
+ * Selects from `live`, `time`, and `buffer` features and composes them
+ * itself rather than going through `createMediaButton`, since the LiveButton
+ * needs three feature slices to detect the live edge and seek.
+ *
+ * Falls back to `LiveButtonCore.defaultText` (`'Live'` by default) when no
+ * children are provided. Override the static field globally for i18n.
+ *
+ * @example
+ * ```tsx
+ * <LiveButton />
+ * ```
+ *
+ * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+ */
+export const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(
+  function LiveButton(componentProps, forwardedRef): ReactNode {
+    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;
+
+    const live = usePlayer(selectLive);
+    const time = usePlayer(selectTime);
+    const buffer = usePlayer(selectBuffer);
+
+    const media: LiveButtonMediaState | null =
+      live && time && buffer
+        ? {
+            currentTime: time.currentTime,
+            seek: time.seek,
+            seekable: buffer.seekable,
+            liveEdgeStart: live.liveEdgeStart,
+            targetLiveWindow: live.targetLiveWindow,
+          }
+        : null;
+
+    const tooltipCtx = useOptionalTooltipContext();
+    const [core] = useState(() => new LiveButtonCore());
+    core.setProps({ label, disabled });
+
+    const { getButtonProps, buttonRef } = useButton({
+      displayName: DISPLAY_NAME,
+      onActivate: () => {
+        if (media) core.seekToLive(media);
+      },
+      isDisabled: () => !!disabled || !media,
+    });
+
+    if (media) core.setMedia(media);
+    const state = media ? core.getState() : null;
+    const labelText = state ? core.getLabel(state) : undefined;
+
+    useLayoutEffect(() => {
+      if (!tooltipCtx) return;
+      tooltipCtx.setContent(labelText);
+      return () => tooltipCtx.setContent(undefined);
+    }, [tooltipCtx, labelText]);
+
+    if (!media || !state) {
+      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');
+      return null;
+    }
+
+    const attrs = core.getAttrs(state);
+    const content = children ?? LiveButtonCore.defaultText;
+
+    return renderElement(
+      'button',
+      { render, className, style },
+      {
+        state,
+        stateAttrMap: LiveButtonDataAttrs,
+        ref: [forwardedRef, buttonRef],
+        props: [attrs, { children: content, ...elementProps }, getButtonProps()],
+      }
+    );
+  }
+);
+
+LiveButton.displayName = DISPLAY_NAME;
+
+export namespace LiveButton {
+  export type Props = LiveButtonProps;
+  export type State = LiveButtonCore.State;
+}
diff --git a/packages/skins/src/default/css/components/button.css b/packages/skins/src/default/css/components/button.css
index 52bab2abc..5d04cb5e4 100644
--- a/packages/skins/src/default/css/components/button.css
+++ b/packages/skins/src/default/css/components/button.css
@@ -109,3 +109,35 @@
     content: attr(data-rate) "\00D7";
   }
 }
+
+/* Live button — wide pill button with a status dot (gray → red at the live
+   edge) rendered via ::before, and "LIVE" text rendered as the button's own
+   text content. */
+.media-default-skin .media-button--live {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  width: auto;
+  aspect-ratio: auto;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &::before {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+    background-color: oklch(from currentColor l c h / 0.4);
+    border-radius: 50%;
+    transition: background-color 150ms ease-out;
+  }
+
+  &[data-live-edge]::before {
+    background-color: oklch(0.65 0.22 27);
+  }
+}
diff --git a/packages/skins/src/default/tailwind/components/button.ts b/packages/skins/src/default/tailwind/components/button.ts
index 2786c008c..3b7fc099d 100644
--- a/packages/skins/src/default/tailwind/components/button.ts
+++ b/packages/skins/src/default/tailwind/components/button.ts
@@ -20,4 +20,17 @@ export const button = {
     'aria-expanded:bg-current/10'
   ),
   icon: cn('grid w-9 aspect-square p-0', 'active:scale-90'),
+  /**
+   * Live variant: wide pill button with a status dot rendered via `::before`
+   * (gray → red at the live edge) and "LIVE" as the button's own text.
+   */
+  live: cn(
+    'inline-flex items-center gap-1.5',
+    'aspect-auto w-auto px-3 py-2',
+    'text-xs font-semibold uppercase tracking-wider leading-none',
+    'before:inline-block before:size-2 before:shrink-0 before:rounded-full',
+    'before:bg-current/40 before:transition-colors before:duration-150 before:ease-out',
+    'before:content-[""]',
+    'data-[live-edge]:before:bg-red-500'
+  ),
 };
diff --git a/packages/skins/src/minimal/css/components/button.css b/packages/skins/src/minimal/css/components/button.css
index 2711ac775..eb65bbd1c 100644
--- a/packages/skins/src/minimal/css/components/button.css
+++ b/packages/skins/src/minimal/css/components/button.css
@@ -117,3 +117,35 @@
     content: attr(data-rate) "\00D7";
   }
 }
+
+/* Live button — wide pill button with a status dot (gray → red at the live
+   edge) rendered via ::before, and "LIVE" text rendered as the button's own
+   text content. */
+.media-minimal-skin .media-button--live {
+  display: inline-flex;
+  gap: 0.4rem;
+  align-items: center;
+  width: auto;
+  aspect-ratio: auto;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+
+  &::before {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+    background-color: oklch(from currentColor l c h / 0.4);
+    border-radius: 50%;
+    transition: background-color 150ms ease-out;
+  }
+
+  &[data-live-edge]::before {
+    background-color: oklch(0.65 0.22 27);
+  }
+}
diff --git a/packages/skins/src/minimal/tailwind/components/button.ts b/packages/skins/src/minimal/tailwind/components/button.ts
index c55bcfb50..5f34aad57 100644
--- a/packages/skins/src/minimal/tailwind/components/button.ts
+++ b/packages/skins/src/minimal/tailwind/components/button.ts
@@ -22,4 +22,17 @@ export const button = {
     'aria-expanded:bg-current/10'
   ),
   icon: cn('grid w-[2.375rem] aspect-square p-0', 'active:scale-90'),
+  /**
+   * Live variant: wide pill button with a status dot rendered via `::before`
+   * (gray → red at the live edge) and "LIVE" as the button's own text.
+   */
+  live: cn(
+    'inline-flex items-center gap-1.5',
+    'aspect-auto w-auto px-3 py-2',
+    'text-xs font-semibold uppercase tracking-wider leading-none',
+    'before:inline-block before:size-2 before:shrink-0 before:rounded-full',
+    'before:bg-current/40 before:transition-colors before:duration-150 before:ease-out',
+    'before:content-[""]',
+    'data-[live-edge]:before:bg-red-500'
+  ),
 };