Installation

Install Video.js and build your first player with streaming support and accessible controls

Video.js is a React video player component library — composable primitives, hooks, and TypeScript types for building accessible, customizable players with minimal bundle size.

The code examples in this guide can be tailored to your use case. Run npx @videojs/cli docs how-to/installation interactively, or pass all flags:

npx @videojs/cli docs how-to/installation \
  --framework <html|react> \
  --preset <video|audio|background-video> \
  --skin <default|minimal> \
  --media <html5-video|html5-audio|hls|background-video> \
  --source-url <url> \
  --install-method <cdn|npm|pnpm|yarn|bun>

Answer the questions below to get started quickly with your first embed code.

Choose your JS framework

Video.js aims to provide idiomatic development experiences in your favorite JS and CSS frameworks. More to come.

React

HTML

Choose your use case

The default presets work well for general website playback. More pre-built players to come.

Video

Audio

Background Video

Choose skin

Choose how your player looks.

Default

Minimal

Want full control over the skin? You can eject it copy the source into your project and customize it freely.

Choose your media source type

Video.js supports a wide range of file types and hosting services. It’s easy to switch between them.

Select your source

Enter the URL to a video to auto-detect

or select manually

Or upload your media for free to Mux

Drop a video— or —

Install Video.js

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>

npm install @videojs/html

pnpm add @videojs/html

yarn add @videojs/html

bun add @videojs/html

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"></script>

npm install @videojs/html

pnpm add @videojs/html

yarn add @videojs/html

bun add @videojs/html

npm install @videojs/react

pnpm add @videojs/react

yarn add @videojs/react

bun add @videojs/react

Use your player

<!--
  The PlayerProvider passes state between the UI components
  and Media, and makes fully custom UIs possible.
  It does not have layout by default (display:contents)
 -->
<video-player>
  <!--
    Skins contain the entire player UI and are easily swappable.
    They can each be "ejected" for full control and customization
    of UI components.
   -->
  <video-skin>
    <!--
      Media are players without UIs, handling networking
      and display of the media. They are easily swappable
      to handle different sources.
    -->
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </video-skin>
</video-player>

<!--
  The PlayerProvider passes state between the UI components
  and Media, and makes fully custom UIs possible.
  It does not have layout by default (display:contents)
 -->
<video-player>
  <!--
    Skins contain the entire player UI and are easily swappable.
    They can each be "ejected" for full control and customization
    of UI components.
   -->
  <video-skin>
    <!--
      Media are players without UIs, handling networking
      and display of the media. They are easily swappable
      to handle different sources.
    -->
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </video-skin>
</video-player>

Create your player

Add it to your components folder in a new file.

'use client';

import '@videojs/react/video/skin.css';
import { createPlayer, videoFeatures } from '@videojs/react';
import { VideoSkin, Video } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

interface MyPlayerProps {
  src: string;
}

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </Player.Provider>
  );
};

'use client';

import '@videojs/react/video/skin.css';
import { createPlayer, videoFeatures } from '@videojs/react';
import { VideoSkin, Video } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

interface MyPlayerProps {
  src: string;
}

export const MyPlayer = ({ src }: MyPlayerProps) => {
  return (
    <Player.Provider>
      <VideoSkin>
        <Video src={src} playsInline />
      </VideoSkin>
    </Player.Provider>
  );
};

Use your player

import { MyPlayer } from '../components/player';

export const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <MyPlayer src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

import { MyPlayer } from '../components/player';

export const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <MyPlayer src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
    </div>
  );
};

Ejecting a skin

Skins ship pre-built. To customize beyond CSS variables, eject — copy the skin source into your project and own it from there. Pick whichever built-in skin is closest to your goal as a starting point.

Default

Minimal

'use client';

import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode, isValidElement } from 'react';
import { CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons';
import { createPlayer, Poster, Container, usePlayer, BufferingIndicator, CaptionsButton, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, Popover, SeekButton, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider, type RenderProp } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './player.css';

const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;

const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;

// ================================================================
// Player
// ================================================================

const SEEK_TIME = 10;

export const Player = createPlayer({ features: videoFeatures });

export interface VideoPlayerProps {
  src: string;
  style?: CSSProperties;
  className?: string;
  poster?: string | RenderProp<Poster.State> | undefined;
}

/**
 * @example
 * ```tsx
 * <VideoPlayer
 *   src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
 *   poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp"
 * />
 * ```
 */
export function VideoPlayer({ src, className, poster, ...rest }: VideoPlayerProps): ReactNode {
  return (
    <Player.Provider>
      <Container className={`media-default-skin media-default-skin--video ${className ?? ''}`} {...rest}>
        <Video src={src} playsInline />

        {poster && (
          <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
        )}

        <BufferingIndicator
          render={(props) => (
            <div {...props} className="media-buffering-indicator">
              <div className="media-surface">
                <SpinnerIcon className="media-icon" />
              </div>
            </div>
          )}
        />

        <ErrorDialog.Root>
          <ErrorDialog.Popup className="media-error">
            <div className="media-error__dialog media-surface">
              <div className="media-error__content">
                <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
                <ErrorDialog.Description className="media-error__description" />
              </div>
              <div className="media-error__actions">
                <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
              </div>
            </div>
          </ErrorDialog.Popup>
        </ErrorDialog.Root>

        <Controls.Root className="media-surface media-controls">
          <Tooltip.Provider>
            <div className="media-button-group">
              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <PlayButton className="media-button--play" render={<Button />}>
                      <RestartIcon className="media-icon media-icon--restart" />
                      <PlayIcon className="media-icon media-icon--play" />
                      <PauseIcon className="media-icon media-icon--pause" />
                    </PlayButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <SeekButton seconds={-SEEK_TIME} className="media-button--seek" render={<Button />}>
                      <span className="media-icon__container">
                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
                        <span className="media-icon__label">{SEEK_TIME}</span>
                      </span>
                    </SeekButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <SeekButton seconds={SEEK_TIME} className="media-button--seek" render={<Button />}>
                      <span className="media-icon__container">
                        <SeekIcon className="media-icon media-icon--seek" />
                        <span className="media-icon__label">{SEEK_TIME}</span>
                      </span>
                    </SeekButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>
            </div>

            <div className="media-time-controls">
              <Time.Value type="current" className="media-time" />
              <TimeSlider.Root className="media-slider">
                <TimeSlider.Track className="media-slider__track">
                  <TimeSlider.Fill className="media-slider__fill" />
                  <TimeSlider.Buffer className="media-slider__buffer" />
                </TimeSlider.Track>
                <TimeSlider.Thumb className="media-slider__thumb" />

                <div className="media-surface media-preview media-slider__preview">
                  <Slider.Thumbnail className="media-preview__thumbnail" />
                  <TimeSlider.Value type="pointer" className="media-time media-preview__time" />
                  <SpinnerIcon className="media-preview__spinner media-icon" />
                </div>
              </TimeSlider.Root>
              <Time.Value type="duration" className="media-time" />
            </div>

            <div className="media-button-group">
              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={<PlaybackRateButton className="media-button--playback-rate" render={<Button />} />}
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <VolumePopover />

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <CaptionsButton className="media-button--captions" render={<Button />}>
                      <CaptionsOffIcon className="media-icon media-icon--captions-off" />
                      <CaptionsOnIcon className="media-icon media-icon--captions-on" />
                    </CaptionsButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <CastButton className="media-button--cast" render={<Button />}>
                      <CastEnterIcon className="media-icon media-icon--cast-enter" />
                      <CastExitIcon className="media-icon media-icon--cast-exit" />
                    </CastButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <PiPButton className="media-button--pip" render={<Button />}>
                      <PipEnterIcon className="media-icon media-icon--pip-enter" />
                      <PipExitIcon className="media-icon media-icon--pip-exit" />
                    </PiPButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <FullscreenButton className="media-button--fullscreen" render={<Button />}>
                      <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
                      <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
                    </FullscreenButton>
                  }
                />
                <Tooltip.Popup className="media-surface media-tooltip" />
              </Tooltip.Root>
            </div>
          </Tooltip.Provider>
        </Controls.Root>

        <div className="media-overlay" />

        {/* Hotkeys */}
        <Hotkey keys="Space" action="togglePaused" />
        <Hotkey keys="k" action="togglePaused" />
        <Hotkey keys="m" action="toggleMuted" />
        <Hotkey keys="f" action="toggleFullscreen" />
        <Hotkey keys="c" action="toggleSubtitles" />
        <Hotkey keys="i" action="togglePictureInPicture" />
        <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
        <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
        <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
        <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
        <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
        <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
        <Hotkey keys="0-9" action="seekToPercent" />
        <Hotkey keys="Home" action="seekToPercent" value={0} />
        <Hotkey keys="End" action="seekToPercent" value={100} />
        <Hotkey keys=">" action="speedUp" />
        <Hotkey keys="<" action="speedDown" />

        {/* Gestures */}
        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
        <Gesture type="tap" action="toggleControls" pointer="touch" />
        <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
        <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />

        {/* Input Feedback */}
        <StatusAnnouncer />
        <div className="media-input-feedback">
          <VolumeIndicator.Root className="media-surface media-input-feedback-island media-input-feedback-island--volume">
            <VolumeIndicator.Fill className="media-input-feedback-island__content">
              <VolumeHighIcon className="media-icon media-icon--volume-high" />
              <VolumeLowIcon className="media-icon media-icon--volume-low" />
              <VolumeOffIcon className="media-icon media-icon--volume-off" />
              <VolumeIndicator.Value className="media-input-feedback-island__value" />
            </VolumeIndicator.Fill>
          </VolumeIndicator.Root>

          <StatusIndicator.Root
            actions={TOP_STATUS_ACTIONS}
            className="media-surface media-input-feedback-island media-input-feedback-island--status"
          >
            <div className="media-input-feedback-island__content">
              <CaptionsOnIcon className="media-icon media-icon--captions-on" />
              <CaptionsOffIcon className="media-icon media-icon--captions-off" />
              <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
              <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
              <PipEnterIcon className="media-icon media-icon--pip-enter" />
              <PipExitIcon className="media-icon media-icon--pip-exit" />
              <StatusIndicator.Value className="media-input-feedback-island__value" />
            </div>
          </StatusIndicator.Root>

          <SeekIndicator.Root className="media-input-feedback-bubble">
            <ChevronIcon className="media-icon media-icon--seek" />
            <SeekIndicator.Value className="media-time" />
          </SeekIndicator.Root>

          <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className="media-input-feedback-bubble">
            <PlayIcon className="media-icon media-icon--play" />
            <PauseIcon className="media-icon media-icon--pause" />
          </StatusIndicator.Root>
        </div>
      </Container>

    </Player.Provider>
  );
}

// ================================================================
// Components
// ================================================================

const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
  return (
    <button
      ref={ref}
      type="button"
      className={`media-button media-button--subtle media-button--icon ${className ?? ''}`}
      {...props}
    />
  );
});

function VolumePopover(): ReactNode {
  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');

  const muteButton = (
    <MuteButton className="media-button--mute" render={<Button />}>
      <VolumeOffIcon className="media-icon media-icon--volume-off" />
      <VolumeLowIcon className="media-icon media-icon--volume-low" />
      <VolumeHighIcon className="media-icon media-icon--volume-high" />
    </MuteButton>
  );

  if (volumeUnsupported) return muteButton;

  return (
    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
      <Popover.Trigger render={muteButton} />
      <Popover.Popup className="media-surface media-popover media-popover--volume">
        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
          <VolumeSlider.Track className="media-slider__track">
            <VolumeSlider.Fill className="media-slider__fill" />
          </VolumeSlider.Track>
          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
        </VolumeSlider.Root>
      </Popover.Popup>
    </Popover.Root>
  );
}

// ================================================================
// Utilities
// ================================================================

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function isRenderProp(value: unknown): value is RenderProp<any> {
  return typeof value === 'function' || isValidElement(value);
}

/* ==========================================================================
   Reset
   ========================================================================== */

.media-default-skin *,
.media-default-skin *::before,
.media-default-skin *::after {
  box-sizing: border-box;
}
.media-default-skin img,
.media-default-skin video,
.media-default-skin svg {
  display: block;
  max-width: 100%;
}
.media-default-skin button {
  font: inherit;
}
.media-default-skin [hidden][hidden] {
  /* Keep authored templates hidden even when component classes set display. */
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .media-default-skin {
    interpolate-size: allow-keywords;
  }
}

/* ==========================================================================
   Root Container
   ========================================================================== */

.media-default-skin {
  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));
  --media-icon-size: 18px;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  container: media-root / inline-size;
  font-family:
    Inter Variable,
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  line-height: 1.5;
  letter-spacing: normal;
  outline: 2px solid transparent;
  outline-offset: -4px;
  border-radius: var(--media-border-radius, 2rem);
  isolation: isolate;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
  transition-property: outline-offset, outline-color;

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }

  & > * {
    font-size: 0.75rem; /* 12px at 100% font size */

    @container media-root (width > 48rem) {
      font-size: 0.875rem; /* 14px at 100% font size */
    }
  }
}

/* ==========================================================================
   Surface (shared glass effect for tooltips, popovers, controls)
   ========================================================================== */

.media-default-skin .media-surface {
  background-color: var(--media-surface-background-color);
  box-shadow:
    0 0 0 1px var(--media-surface-outer-border-color),
    0 1px 3px 0 var(--media-surface-shadow-color),
    0 1px 2px -1px var(--media-surface-shadow-color);
  backdrop-filter: var(--media-surface-backdrop-filter);

  /* Inner border ring */
  &::after {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
  }
}

/* ==========================================================================
   Media Element
   ========================================================================== */

.media-default-skin ::slotted(video),
.media-default-skin video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}
.media-default-skin ::slotted(video) {
  border-radius: var(--media-video-border-radius);
}
.media-default-skin video {
  border-radius: inherit;
}

.media-default-skin:fullscreen ::slotted(video),
.media-default-skin:fullscreen video {
  object-fit: contain;
}

/* ==========================================================================
   Overlay / Scrim
   ========================================================================== */

.media-default-skin .media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
  border-radius: inherit;
  opacity: 0;
  backdrop-filter: blur(0) saturate(1);
  transition-timing-function: ease-out;
  transition-duration: var(--media-controls-transition-duration);
  transition-property: opacity, backdrop-filter;
}

.media-default-skin .media-error ~ .media-overlay {
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-duration: var(--media-error-dialog-transition-duration);
}

.media-default-skin .media-controls[data-visible] ~ .media-overlay,
.media-default-skin .media-error[data-open] ~ .media-overlay {
  opacity: 1;
}

.media-default-skin .media-error[data-open] ~ .media-overlay {
  backdrop-filter: blur(16px) saturate(1.5);
}

/* ==========================================================================
   Buffering Indicator
   ========================================================================== */

.media-default-skin .media-buffering-indicator {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0);
  pointer-events: none;

  &:not([data-visible]) {
    --media-spinner-animation: none;
  }

  &[data-visible] {
    display: flex;
  }

  .media-surface {
    padding: 0.25rem;
    border-radius: 100%;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-default-skin .media-error {
  outline: none;
}

.media-default-skin .media-error:not([data-open]) {
  display: none;
}

.media-default-skin .media-error__title {
  font-weight: 600;
  line-height: 1.25;
}

.media-default-skin .media-error__description {
  overflow-wrap: anywhere;
  opacity: 0.7;
}

.media-default-skin .media-error__actions {
  display: flex;
  gap: 0.5rem;

  & > * {
    flex: 1;
  }
}

.media-default-skin .media-error[data-open] ~ .media-controls * {
  visibility: hidden;
}

/* ==========================================================================
   Controls
   ========================================================================== */

.media-default-skin .media-controls {
  display: flex;
  column-gap: 0.075rem;
  align-items: center;
  padding: 0.375rem;
  container: media-controls / inline-size;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  border-radius: 1.5rem;
}

/* ==========================================================================
   Time Display
   ========================================================================== */

.media-default-skin .media-time-controls {
  display: flex;
  flex: 1;
  gap: 0.75rem;
  align-items: center;
  padding-inline: 0.5rem;
  container: media-time-controls / inline-size;
}

.media-default-skin .media-time {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base button */
.media-default-skin .media-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border: none;
  border-radius: calc(infinity * 1px);
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: background-color, outline-offset, scale;
  /* Fix weird jumping when clicking on the buttons in Safari. */
  will-change: scale;

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }

  &:active {
    scale: 0.98;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(1);
  }

  &[data-availability="unavailable"],
  &[data-availability="unsupported"] {
    display: none;
  }
}

/* Primary button variant */
.media-default-skin .media-button--primary {
  font-weight: 500;
  color: oklch(0 0 0);
  text-shadow: none;
  background: oklch(1 0 0);
}

/* Subtle button variant */
.media-default-skin .media-button--subtle {
  color: inherit;
  text-shadow: inherit;
  background: transparent;

  &:hover,
  &:focus-visible,
  &[aria-expanded="true"] {
    text-decoration: none;
    background-color: oklch(from currentColor l c h / 0.1);
  }
}

/* Icon button variant */
.media-default-skin .media-button--icon {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  padding: 0;

  &:active {
    scale: 0.9;
  }

  & .media-icon {
    grid-area: 1 / 1;
    transition-behavior: allow-discrete;
    transition-property: display, opacity;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
  }
}

/* Seek button */
.media-default-skin .media-button--seek {
  & .media-icon__label {
    position: absolute;
    right: -1px;
    bottom: -3px;
    font-size: 10px;
    font-weight: 480;
    font-variant-numeric: tabular-nums;
  }

  &:has(.media-icon--flipped) .media-icon__label {
    right: unset;
    left: -1px;
  }
}

/* Playback rate button */
.media-default-skin .media-button--playback-rate {
  padding: 0;

  &::after {
    width: 4ch;
    font-variant-numeric: tabular-nums;
    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);
  }
}

/* ==========================================================================
   Button Groups
   ========================================================================== */

.media-default-skin .media-button-group {
  display: flex;
  gap: 0.075rem;
  align-items: center;

  @container media-root (width > 42rem) {
    gap: 0.125rem;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.media-default-skin .media-icon__container {
  position: relative;
}
.media-default-skin .media-icon {
  flex-shrink: 0;
  width: var(--media-icon-size);
  height: var(--media-icon-size);
}
.media-default-skin .media-icon--flipped {
  scale: -1 1;
}

/* ==========================================================================
   Poster Image
   ========================================================================== */

.media-default-skin media-poster,
.media-default-skin > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.25s;
}
.media-default-skin media-poster:not([data-visible]),
.media-default-skin > img:not([data-visible]) {
  opacity: 0;
}
.media-default-skin media-poster ::slotted(img),
.media-default-skin media-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: var(--media-video-border-radius);
}
.media-default-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

.media-default-skin:fullscreen media-poster ::slotted(img),
.media-default-skin:fullscreen media-poster img,
.media-default-skin:fullscreen > img {
  object-fit: contain;
}

/* ==========================================================================
   Media preview
   ========================================================================== */
.media-default-skin .media-preview {
  pointer-events: none;
  background-color: oklch(0 0 0 / 0.9);
  border-radius: 0.75rem;

  & .media-preview__thumbnail {
    position: relative;
    display: block;
    overflow: clip;
    border-radius: inherit;

    &::after {
      position: absolute;
      inset: 0;
      content: "";
      background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));
      border-radius: inherit;
    }
  }

  & .media-preview__time {
    position: absolute;
    inset-inline: 0;
    bottom: 0.5rem;
    text-align: center;
  }

  & .media-overlay {
    opacity: 1;
  }

  & .media-preview__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    translate: -50% -50%;
  }

  & .media-preview__thumbnail,
  & .media-preview__spinner {
    transition: opacity 150ms ease-out;
  }

  &:not(:has(.media-preview__thumbnail[data-loading])) {
    & .media-preview__spinner {
      --media-spinner-animation: none;
    }
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    & .media-preview__thumbnail {
      opacity: 0;
    }
    & .media-preview__spinner {
      opacity: 1;
    }
  }
}

/* ==========================================================================
   Slider
   ========================================================================== */

.media-default-skin .media-slider {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border-radius: calc(infinity * 1px);

  &[data-orientation="horizontal"] {
    width: 100%;
    min-width: 5rem;
    height: 2rem;
  }

  &[data-orientation="vertical"] {
    width: 2rem;
    height: 5rem;
  }
}

/* Track */
.media-default-skin .media-slider__track {
  position: relative;
  overflow: hidden;
  user-select: none;
  border-radius: inherit;
  isolation: isolate;

  &[data-orientation="horizontal"] {
    width: 100%;
    height: 0.25rem;
  }

  &[data-orientation="vertical"] {
    width: 0.25rem;
    height: 100%;
  }
}

/* Thumb */
.media-default-skin .media-slider__thumb {
  position: absolute;
  z-index: 10;
  width: 0.625rem;
  height: 0.625rem;
  user-select: none;
  outline: 4px solid transparent;
  outline-offset: -4px;
  background-color: currentColor;
  border-radius: calc(infinity * 1px);
  box-shadow:
    0 0 0 1px var(--media-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),
    0 1px 3px 0 oklch(0 0 0 / 0.15),
    0 1px 2px -1px oklch(0 0 0 / 0.15);
  opacity: 0;
  translate: -50% -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: opacity, height, width, outline-offset;

  &[data-orientation="horizontal"] {
    top: 50%;
    left: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    top: calc(100% - var(--media-slider-fill));
    left: 50%;
  }

  &:hover,
  &:focus {
    outline-color: oklch(from currentColor l c h / 0.25);
    outline-offset: 0;
  }

  &::after {
    position: absolute;
    inset: -4px;
    content: "";
    border-radius: inherit;
    box-shadow: 0 0 0 2px oklch(1 0 0);
    transition-timing-function: ease-out;
    transition-duration: 150ms;
    transition-property: opacity, scale;
  }

  &:not(:focus-visible)::after {
    opacity: 0;
    scale: 0.5;
  }
}

.media-default-skin .media-slider:active .media-slider__thumb,
.media-default-skin .media-slider__thumb--persistent {
  width: 0.75rem;
  height: 0.75rem;
}

.media-default-skin .media-slider:hover .media-slider__thumb,
.media-default-skin .media-slider__thumb:focus-visible,
.media-default-skin .media-slider__thumb--persistent {
  opacity: 1;
}

/* Shared track fills */
.media-default-skin .media-slider__buffer,
.media-default-skin .media-slider__fill {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.media-default-skin .media-slider__buffer[data-orientation="horizontal"],
.media-default-skin .media-slider__fill[data-orientation="horizontal"] {
  inset-block: 0;
  left: 0;
}

.media-default-skin .media-slider__buffer[data-orientation="vertical"],
.media-default-skin .media-slider__fill[data-orientation="vertical"] {
  inset-inline: 0;
  bottom: 0;
}

/* Buffer */
.media-default-skin .media-slider__buffer {
  background-color: oklch(from currentColor l c h / 0.2);
  transition-timing-function: ease-out;
  transition-duration: 0.25s;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-buffer);
    transition-property: width;
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-buffer);
    transition-property: height;
  }
}

/* Fill */
.media-default-skin .media-slider__fill {
  background-color: currentColor;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-fill);
  }
}

/* Dragging — thumb and fill follow the pointer position */
.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
  left: var(--media-slider-pointer);
}

.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
  top: calc(100% - var(--media-slider-pointer));
}

.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
  width: var(--media-slider-pointer);
}

.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
  height: var(--media-slider-pointer);
}

/* ==========================================================================
   Popups & Tooltips
   ========================================================================== */

.media-default-skin .media-popover,
.media-default-skin .media-tooltip {
  margin: 0;
  overflow: visible;
  color: inherit;
  border: 0;
  transition-timing-function: var(--media-popup-transition-timing-function);
  transition-duration: var(--media-popup-transition-duration);
  transition-property: scale, opacity, filter;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    filter: blur(8px);
    scale: 0.5;
  }

  &[data-instant] {
    transition-duration: 0ms;
  }

  &[data-side="top"] {
    transform-origin: bottom;
  }
  &[data-side="bottom"] {
    transform-origin: top;
  }
  &[data-side="left"] {
    transform-origin: right;
  }
  &[data-side="right"] {
    transform-origin: left;
  }

  /* Safe area between trigger and popup */
  &::before {
    position: absolute;
    pointer-events: inherit;
    content: "";
  }

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    inset-inline: 0;
    width: 100%;
  }
  &[data-side="top"]::before {
    top: 100%;
  }
  &[data-side="bottom"]::before {
    bottom: 100%;
  }

  &[data-side="left"]::before,
  &[data-side="right"]::before {
    inset-block: 0;
    height: 100%;
  }
  &[data-side="left"]::before {
    left: 100%;
  }
  &[data-side="right"]::before {
    right: 100%;
  }
}

.media-default-skin .media-popover {
  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-popover-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-popover-side-offset);
  }
}
.media-default-skin .media-popover--volume {
  padding: 0.75rem 0;
  border-radius: calc(infinity * 1px);

  &:has(media-volume-slider[data-availability="unsupported"]) {
    display: none;
  }
}

.media-default-skin .media-tooltip {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: calc(infinity * 1px);

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-tooltip-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-tooltip-side-offset);
  }
}

/* ==========================================================================
   Native Caption Track
   ========================================================================== */

.media-default-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: 25ms;
  --media-caption-track-y: -0.5rem;

  &:has(.media-controls[data-visible]) {
    --media-caption-track-y: -5.5rem;
  }

  @container media-root (width > 42rem) {
    &:has(.media-controls[data-visible]) > * {
      --media-caption-track-y: -3.5rem;
    }
  }
}

.media-default-skin video::-webkit-media-text-track-container {
  z-index: 1;
  font-family: inherit;
  scale: 0.98;
  translate: 0 var(--media-caption-track-y);
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
}

/* ==========================================================================
   Input Feedback
   ========================================================================== */

.media-default-skin .media-input-feedback {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: 3.5rem; /* Shift up a little in smaller containers */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  color: var(--media-color-primary, oklch(1 0 0));
  pointer-events: none;

  @container media-root (width > 24rem) {
    bottom: 0;
  }
}

/* --- Feedback islands ------------------------------------------------------- */

.media-default-skin .media-input-feedback-island {
  --media-surface-background-color: oklch(0 0 0 / 0.25);
  position: absolute;
  top: 0.75rem;
  font-weight: 500;
  color: inherit;
  pointer-events: none;
  border-radius: calc(Infinity * 1px);
  transform-origin: top center;
  transition-timing-function: ease-out;
  transition-duration: 100ms;

  .media-input-feedback-island__content {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.25rem 0.625rem;

    /* Increase contrast of the content */
    * {
      mix-blend-mode: difference;
    }
  }

  .media-icon {
    display: none;
    flex-shrink: 0;
  }

  .media-input-feedback-island__value {
    margin-left: auto;
  }

  @media (pointer: coarse) {
    transition-property: scale, translate, opacity;
    will-change: scale, translate, opacity;
  }

  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    transition-property: scale, translate, filter, opacity;
    will-change: scale, translate, filter, opacity;
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-surface-background-color: oklch(0 0 0);
  }

  /* Default hidden state */
  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transition-timing-function: ease-in;
    transition-duration: 250ms;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
      scale: 0.9;
    }

    @media (prefers-reduced-motion: no-preference) {
      &[data-ending-style] {
        translate: 0 -25%;
      }
    }
  }
}

.media-default-skin .media-input-feedback-island--volume {
  width: min(80%, 12rem);

  .media-input-feedback-island__content {
    --media-progress-fill: var(--media-volume-fill);
    background-image: linear-gradient(
      to right,
      currentColor 0%,
      currentColor var(--media-progress-fill),
      transparent var(--media-progress-fill),
      transparent 100%
    );
    border-radius: inherit;
    transition: --media-progress-fill 200ms linear;
  }
}

.media-default-skin .media-input-feedback-island--volume[data-level="high"] .media-icon--volume-high,
.media-default-skin .media-input-feedback-island--volume[data-level="low"] .media-icon--volume-low,
.media-default-skin .media-input-feedback-island--volume[data-level="off"] .media-icon--volume-off {
  display: block;
}

.media-default-skin .media-input-feedback-island--status[data-status="captions-on"] .media-icon--captions-on,
.media-default-skin .media-input-feedback-island--status[data-status="captions-off"] .media-icon--captions-off,
.media-default-skin .media-input-feedback-island--status[data-status="fullscreen"] .media-icon--fullscreen-enter,
.media-default-skin .media-input-feedback-island--status[data-status="exit-fullscreen"] .media-icon--fullscreen-exit,
.media-default-skin .media-input-feedback-island--status[data-status="pip"] .media-icon--pip-enter,
.media-default-skin .media-input-feedback-island--status[data-status="exit-pip"] .media-icon--pip-exit {
  display: block;
}

/* --- Boundary shake ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin .media-input-feedback-island--volume[data-min],
  .media-default-skin .media-input-feedback-island--volume[data-max] {
    animation: media-shake 300ms ease-in-out;
  }
}

/* --- Bubble ---------------------------------------------------------------- */

.media-default-skin .media-input-feedback-bubble {
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 2; /* default to center for status bubbles and undirected seeks */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: opacity 250ms ease-out;

  @container media-root (width > 24rem) {
    padding: 2rem;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transition-timing-function: ease-in;
    transition-duration: 200ms;
  }
}

/* Direction placement — seek bubbles move to the side implied by their direction. */
.media-default-skin .media-input-feedback-bubble[data-direction="backward"] {
  grid-column: 1;
  justify-self: left;
}

.media-default-skin .media-input-feedback-bubble:not([data-direction]) {
  grid-column: 2;
  transition-timing-function:
    ease-out, linear(0, 0.12 1.5%, 1.35 9.7%, 2.2 13.9%, 3 19.9%, 2.7 21.8%, 0.62 37.5%, 0.96 50.9%, 1);
  transition-duration: 600ms;
  transition-property: opacity, scale;

  @media (prefers-reduced-motion: reduce) {
    transition: opacity 100ms ease-out;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    scale: 0.8;
    transition-timing-function: ease-in;
    transition-duration: 200ms;
  }
}

.media-default-skin .media-input-feedback-bubble[data-direction="forward"] {
  grid-column: 3;
  justify-self: right;
}

/* --- Bubble icons ---------------------------------------------------------- */

.media-default-skin .media-input-feedback-bubble .media-icon {
  display: none;
  width: 36px;
  height: 36px;
}

/* seek: seek icon, flipped for backward */
.media-default-skin .media-input-feedback-bubble[data-direction] .media-icon--seek {
  display: block;
}

.media-default-skin .media-input-feedback-bubble[data-direction="backward"] .media-icon--seek {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  .media-default-skin
    .media-input-feedback-bubble[data-direction="forward"]:not([data-starting-style])
    .media-icon--seek {
    animation: media-slide-in-forward 300ms ease-in-out;
  }

  .media-default-skin
    .media-input-feedback-bubble[data-direction="backward"]:not([data-starting-style])
    .media-icon--seek {
    animation: media-slide-in-backward 300ms ease-in-out;
  }

  .media-default-skin .media-input-feedback-island--status[data-status]:not([data-starting-style]) .media-icon,
  .media-default-skin .media-input-feedback-bubble[data-status]:not([data-starting-style]) .media-icon {
    animation: media-pop-in 250ms ease-out;
  }
}

.media-default-skin .media-input-feedback-bubble[data-status="pause"] .media-icon--pause,
.media-default-skin .media-input-feedback-bubble[data-status="play"] .media-icon--play {
  display: block;
}

/* ==========================================================================
   Icon State Visibility for Video Skins

   Data-attribute-driven visibility rules for multi-state icon buttons.
   Uses :is() with both element selectors (for HTML custom element wrappers)
   and class selectors (for React rendered SVG elements).
   ========================================================================== */

/* --- All icons hidden by default --- */

.media-button--play .media-icon--restart,
.media-button--play .media-icon--play,
.media-button--play .media-icon--pause,
.media-button--mute .media-icon--volume-off,
.media-button--mute .media-icon--volume-low,
.media-button--mute .media-icon--volume-high,
.media-button--fullscreen .media-icon--fullscreen-enter,
.media-button--fullscreen .media-icon--fullscreen-exit,
.media-button--pip .media-icon--pip-enter,
.media-button--pip .media-icon--pip-exit,
.media-button--cast .media-icon--cast-enter,
.media-button--cast .media-icon--cast-exit,
.media-button--captions .media-icon--captions-off,
.media-button--captions .media-icon--captions-on {
  display: none;
  opacity: 0;
}

/* --- Active icon per state --- */

/* Play: ended → restart */
.media-button--play[data-ended] .media-icon--restart,
/* Play: paused (not ended) → play */
.media-button--play:not([data-ended])[data-paused] .media-icon--play,
/* Play: playing (not paused, not ended) → pause */
.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
/* Mute: muted → volume off */
.media-button--mute[data-muted] .media-icon--volume-off,
/* Mute: volume low (not muted) → volume low */
.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
/* Mute: volume high (not muted, not low) → volume high */
.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
/* Fullscreen: not fullscreen → enter */
.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
/* Fullscreen: fullscreen → exit */
.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
/* Picture-in-Picture: not active → enter */
.media-button--pip:not([data-pip]) .media-icon--pip-enter,
/* Picture-in-Picture: active → exit */
.media-button--pip[data-pip] .media-icon--pip-exit,
/* Cast: not connected → enter */
.media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter,
/* Cast: connected → exit */
.media-button--cast[data-cast-state="connected"] .media-icon--cast-exit,
/* Captions: not active → captions off */
.media-button--captions:not([data-active]) .media-icon--captions-off,
/* Captions: active → captions on */
.media-button--captions[data-active] .media-icon--captions-on {
  display: block;
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Global @keyframes for all video skins (CSS & Tailwind)                     */
/* -------------------------------------------------------------------------- */

@keyframes media-shake {
  0%,
  100% {
    translate: 0 0;
  }
  20% {
    translate: -6px 0;
  }
  40% {
    translate: 4px 0;
  }
  60% {
    translate: -2px 0;
  }
  80% {
    translate: 1px 0;
  }
}

@keyframes media-slide-in-forward {
  from {
    translate: -60% 0;
    opacity: 0;
  }
}

@keyframes media-slide-in-backward {
  from {
    translate: 60% 0;
    opacity: 0;
  }
}

@keyframes media-pop-in {
  from {
    scale: 0.8;
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Global @properties for all video skins (CSS & Tailwind)                    */
/* -------------------------------------------------------------------------- */

@property --media-progress-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}


/* ==========================================================================
   Root
   ========================================================================== */

.media-default-skin--video {
  --media-spring-timing-function: linear(
    0,
    0.034 1.5%,
    0.763 9.7%,
    1.066 13.9%,
    1.198 19.9%,
    1.184 21.8%,
    0.963 37.5%,
    0.997 50.9%,
    1
  );
  --media-border-color: oklch(0 0 0 / 0.1);
  --media-surface-background-color: oklch(1 0 0 / 0.1);
  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
  --media-video-border-radius: var(--media-border-radius, 2rem);
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 350ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: var(--media-spring-timing-function);
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-side-offset: 0.75rem;
  --media-popover-side-offset: 0.5rem;
  background: oklch(0 0 0);

  @media (prefers-reduced-motion: reduce) {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-error-dialog-transition-timing-function: ease-out;
    --media-popup-transition-duration: 0ms;
  }

  @media (prefers-color-scheme: dark) {
    --media-border-color: oklch(1 0 0 / 0.15);
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-surface-background-color: oklch(0 0 0);
    --media-surface-inner-border-color: oklch(1 0 0 / 0.25);
    --media-surface-outer-border-color: transparent;
  }

  &:has(.media-controls:not([data-visible])) {
    /* Slight delay to hide controls on non-touch devices after interaction */
    @media (pointer: fine) {
      --media-controls-transition-duration: 300ms;
    }
    @media (pointer: coarse) {
      --media-controls-transition-duration: 150ms;
    }
    @media (prefers-reduced-motion: reduce) {
      --media-controls-transition-duration: 50ms;
    }
  }

  /* Inner border ring */
  &::after {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-border-color);
  }

  &:fullscreen {
    --media-border-radius: 0;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-default-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-default-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 18rem;
  padding: 0.75rem;
  color: oklch(1 0 0);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
  border-radius: 1.75rem;
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-property: opacity, scale;
}

.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-default-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.375rem;
  text-shadow: inherit;
}

.media-default-skin--video .media-error__title {
  font-size: 1rem;
}

/* ==========================================================================
   Controls (hide/show behavior)
   ========================================================================== */

.media-default-skin--video .media-controls {
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0.5rem;
  z-index: 10;
  flex-wrap: wrap;
  color: var(--media-color-primary, oklch(1 0 0));
  transform-origin: bottom;
  transition-timing-function: var(--media-controls-transition-timing-function);
  transition-duration: var(--media-controls-transition-duration);

  @media (pointer: fine) {
    transition-property: scale, filter, opacity;
    will-change: scale, filter, opacity;
  }

  @media (pointer: coarse) {
    transition-property: scale, opacity;
    will-change: scale, opacity;
  }

  &:not([data-visible]) {
    pointer-events: none;
    opacity: 0;
    scale: 0.9;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: reduce) {
      scale: 1;
    }
  }

  & .media-time-controls {
    flex: 0 0 100%;
    order: -1;
    padding-inline: 0.625rem;
  }

  & .media-button-group:first-child {
    flex: 1;
    text-align: left;
  }

  & .media-button-group:last-child {
    flex: 1;
    justify-content: end;
  }

  @container media-root (width > 42rem) {
    inset-inline: 0.75rem;
    bottom: 0.75rem;
    flex-wrap: nowrap;
    column-gap: 0.125rem;
    padding: 0.25rem;

    & .media-time-controls {
      flex: 1;
      order: unset;
    }

    & .media-button-group:first-child,
    & .media-button-group:last-child {
      flex: 0 0 auto;
    }
  }
}

.media-default-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* Hide cursor when controls are hidden */
.media-default-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.media-default-skin--video .media-slider__track {
  background-color: oklch(1 0 0 / 0.2);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}

.media-default-skin--video .media-slider__preview {
  --media-preview-max-width: 11rem;
  --media-preview-padding: -1.125rem;
  /**
    Inset is the difference between the container width and the slider (100%) width.
    Divided by 2 as we render the time on both sides.
  */
  --media-preview-inset: calc((100cqi - 100%) / 2);

  position: absolute;
  bottom: calc(100% + 1.2rem);
  left: clamp(
    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding) - var(--media-preview-inset)),
    var(--media-slider-pointer),
    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
  );
  pointer-events: none;
  opacity: 0;
  filter: blur(8px);
  transform-origin: bottom;
  scale: 0.8;
  translate: -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: scale, opacity, filter;

  & .media-preview__thumbnail {
    max-width: var(--media-preview-max-width);
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    max-height: 6rem;
  }
}
.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}

'use client';

import { type CSSProperties, type ComponentProps, forwardRef, type ReactNode, isValidElement } from 'react';
import { CaptionsOffIcon, CaptionsOnIcon, CastEnterIcon, CastExitIcon, ChevronIcon, FullscreenEnterIcon, FullscreenExitIcon, PauseIcon, PipEnterIcon, PipExitIcon, PlayIcon, RestartIcon, SeekIcon, SpinnerIcon, VolumeHighIcon, VolumeLowIcon, VolumeOffIcon } from '@videojs/react/icons/minimal';
import { createPlayer, Poster, Container, usePlayer, BufferingIndicator, CaptionsButton, CastButton, Controls, ErrorDialog, FullscreenButton, Gesture, Hotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, Popover, SeekButton, SeekIndicator, Slider, StatusAnnouncer, StatusIndicator, Time, TimeSlider, Tooltip, VolumeIndicator, VolumeSlider, type RenderProp } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './player.css';

const TOP_STATUS_ACTIONS = ['toggleSubtitles', 'toggleFullscreen', 'togglePictureInPicture'] as const;

const CENTER_STATUS_ACTIONS = ['togglePaused'] as const;

// ================================================================
// Player
// ================================================================

const SEEK_TIME = 10;

export const Player = createPlayer({ features: videoFeatures });

export interface VideoPlayerProps {
  src: string;
  style?: CSSProperties;
  className?: string;
  poster?: string | RenderProp<Poster.State> | undefined;
}

/**
 * @example
 * ```tsx
 * <VideoPlayer
 *   src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
 *   poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp"
 * />
 * ```
 */
export function VideoPlayer({ src, className, poster, ...rest }: VideoPlayerProps): ReactNode {
  return (
    <Player.Provider>
      <Container className={`media-minimal-skin media-minimal-skin--video ${className ?? ''}`} {...rest}>
        <Video src={src} playsInline />

        {poster && (
          <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />
        )}

        <BufferingIndicator
          render={(props) => (
            <div {...props} className="media-buffering-indicator">
              <SpinnerIcon className="media-icon" />
            </div>
          )}
        />

        <ErrorDialog.Root>
          <ErrorDialog.Popup className="media-error">
            <div className="media-error__dialog">
              <div className="media-error__content">
                <ErrorDialog.Title className="media-error__title">Something went wrong.</ErrorDialog.Title>
                <ErrorDialog.Description className="media-error__description" />
              </div>
              <div className="media-error__actions">
                <ErrorDialog.Close className="media-button media-button--primary">OK</ErrorDialog.Close>
              </div>
            </div>
          </ErrorDialog.Popup>
        </ErrorDialog.Root>

        <Controls.Root className="media-controls">
          <Tooltip.Provider>
            <div className="media-button-group">
              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <PlayButton className="media-button--play" render={<Button />}>
                      <RestartIcon className="media-icon media-icon--restart" />
                      <PlayIcon className="media-icon media-icon--play" />
                      <PauseIcon className="media-icon media-icon--pause" />
                    </PlayButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <SeekButton seconds={-SEEK_TIME} className="media-button--seek" render={<Button />}>
                      <span className="media-icon__container">
                        <SeekIcon className="media-icon media-icon--seek media-icon--flipped" />
                        <span className="media-icon__label">{SEEK_TIME}</span>
                      </span>
                    </SeekButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <SeekButton seconds={SEEK_TIME} className="media-button--seek" render={<Button />}>
                      <span className="media-icon__container">
                        <SeekIcon className="media-icon media-icon--seek" />
                        <span className="media-icon__label">{SEEK_TIME}</span>
                      </span>
                    </SeekButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>
            </div>

            <div className="media-time-controls">
              <Time.Group className="media-time-group">
                <Time.Value type="current" className="media-time media-time--current" />
                <Time.Separator className="media-time-separator" />
                <Time.Value type="duration" className="media-time media-time--duration" />
              </Time.Group>

              <TimeSlider.Root className="media-slider">
                <TimeSlider.Track className="media-slider__track">
                  <TimeSlider.Fill className="media-slider__fill" />
                  <TimeSlider.Buffer className="media-slider__buffer" />
                </TimeSlider.Track>
                <TimeSlider.Thumb className="media-slider__thumb" />

                <div className="media-preview media-slider__preview">
                  <div className="media-preview__thumbnail-wrapper">
                    <Slider.Thumbnail className="media-preview__thumbnail" />
                  </div>
                  <TimeSlider.Value type="pointer" className="media-time media-preview__time" />
                  <SpinnerIcon className="media-preview__spinner media-icon" />
                </div>
              </TimeSlider.Root>
            </div>

            <div className="media-button-group">
              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={<PlaybackRateButton className="media-button--playback-rate" render={<Button />} />}
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <VolumePopover />

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <CaptionsButton className="media-button--captions" render={<Button />}>
                      <CaptionsOffIcon className="media-icon media-icon--captions-off" />
                      <CaptionsOnIcon className="media-icon media-icon--captions-on" />
                    </CaptionsButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <CastButton className="media-button--cast" render={<Button />}>
                      <CastEnterIcon className="media-icon media-icon--cast-enter" />
                      <CastExitIcon className="media-icon media-icon--cast-exit" />
                    </CastButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <PiPButton className="media-button--pip" render={<Button />}>
                      <PipEnterIcon className="media-icon media-icon--pip-enter" />
                      <PipExitIcon className="media-icon media-icon--pip-exit" />
                    </PiPButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>

              <Tooltip.Root side="top">
                <Tooltip.Trigger
                  render={
                    <FullscreenButton className="media-button--fullscreen" render={<Button />}>
                      <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
                      <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
                    </FullscreenButton>
                  }
                />
                <Tooltip.Popup className="media-tooltip" />
              </Tooltip.Root>
            </div>
          </Tooltip.Provider>
        </Controls.Root>

        <div className="media-overlay" />

        {/* Hotkeys */}
        <Hotkey keys="Space" action="togglePaused" />
        <Hotkey keys="k" action="togglePaused" />
        <Hotkey keys="m" action="toggleMuted" />
        <Hotkey keys="f" action="toggleFullscreen" />
        <Hotkey keys="c" action="toggleSubtitles" />
        <Hotkey keys="i" action="togglePictureInPicture" />
        <Hotkey keys="ArrowRight" action="seekStep" value={SEEK_TIME / 2} />
        <Hotkey keys="ArrowLeft" action="seekStep" value={-(SEEK_TIME / 2)} />
        <Hotkey keys="l" action="seekStep" value={SEEK_TIME} />
        <Hotkey keys="j" action="seekStep" value={-SEEK_TIME} />
        <Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
        <Hotkey keys="ArrowDown" action="volumeStep" value={-0.05} />
        <Hotkey keys="0-9" action="seekToPercent" />
        <Hotkey keys="Home" action="seekToPercent" value={0} />
        <Hotkey keys="End" action="seekToPercent" value={100} />
        <Hotkey keys=">" action="speedUp" />
        <Hotkey keys="<" action="speedDown" />

        {/* Gestures */}
        <Gesture type="tap" action="togglePaused" pointer="mouse" region="center" />
        <Gesture type="tap" action="toggleControls" pointer="touch" />
        <Gesture type="doubletap" action="seekStep" value={-SEEK_TIME} region="left" />
        <Gesture type="doubletap" action="toggleFullscreen" region="center" />
        <Gesture type="doubletap" action="seekStep" value={SEEK_TIME} region="right" />

        {/* Input Feedback */}
        <StatusAnnouncer />
        <div className="media-input-feedback">
          <VolumeIndicator.Root className="media-input-feedback-island media-input-feedback-island--volume">
            <VolumeIndicator.Fill className="media-input-feedback-island__content">
              <VolumeHighIcon className="media-icon media-icon--volume-high" />
              <VolumeLowIcon className="media-icon media-icon--volume-low" />
              <VolumeOffIcon className="media-icon media-icon--volume-off" />
              <div className="media-input-feedback-island__progress" aria-hidden="true" />
              <VolumeIndicator.Value className="media-input-feedback-island__value" />
            </VolumeIndicator.Fill>
          </VolumeIndicator.Root>

          <StatusIndicator.Root
            actions={TOP_STATUS_ACTIONS}
            className="media-input-feedback-island media-input-feedback-island--status"
          >
            <div className="media-input-feedback-island__content">
              <CaptionsOnIcon className="media-icon media-icon--captions-on" />
              <CaptionsOffIcon className="media-icon media-icon--captions-off" />
              <FullscreenEnterIcon className="media-icon media-icon--fullscreen-enter" />
              <FullscreenExitIcon className="media-icon media-icon--fullscreen-exit" />
              <PipEnterIcon className="media-icon media-icon--pip-enter" />
              <PipExitIcon className="media-icon media-icon--pip-exit" />
              <StatusIndicator.Value className="media-input-feedback-island__value" />
            </div>
          </StatusIndicator.Root>

          <SeekIndicator.Root className="media-input-feedback-bubble">
            <ChevronIcon className="media-icon media-icon--seek" />
            <SeekIndicator.Value className="media-time" />
          </SeekIndicator.Root>

          <StatusIndicator.Root actions={CENTER_STATUS_ACTIONS} className="media-input-feedback-bubble">
            <PlayIcon className="media-icon media-icon--play" />
            <PauseIcon className="media-icon media-icon--pause" />
          </StatusIndicator.Root>
        </div>
      </Container>

    </Player.Provider>
  );
}

// ================================================================
// Components
// ================================================================

const Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {
  return (
    <button
      ref={ref}
      type="button"
      className={`media-button media-button--subtle media-button--icon ${className ?? ''}`}
      {...props}
    />
  );
});

function VolumePopover(): ReactNode {
  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');

  const muteButton = (
    <MuteButton className="media-button--mute" render={<Button />}>
      <VolumeOffIcon className="media-icon media-icon--volume-off" />
      <VolumeLowIcon className="media-icon media-icon--volume-low" />
      <VolumeHighIcon className="media-icon media-icon--volume-high" />
    </MuteButton>
  );

  if (volumeUnsupported) return muteButton;

  return (
    <Popover.Root openOnHover delay={200} closeDelay={100} side="top">
      <Popover.Trigger render={muteButton} />
      <Popover.Popup className="media-popover media-popover--volume">
        <VolumeSlider.Root className="media-slider" orientation="vertical" thumbAlignment="edge">
          <VolumeSlider.Track className="media-slider__track">
            <VolumeSlider.Fill className="media-slider__fill" />
          </VolumeSlider.Track>
          <VolumeSlider.Thumb className="media-slider__thumb media-slider__thumb--persistent" />
        </VolumeSlider.Root>
      </Popover.Popup>
    </Popover.Root>
  );
}

// ================================================================
// Utilities
// ================================================================

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function isRenderProp(value: unknown): value is RenderProp<any> {
  return typeof value === 'function' || isValidElement(value);
}

/* ==========================================================================
   Reset
   ========================================================================== */

.media-minimal-skin *,
.media-minimal-skin *::before,
.media-minimal-skin *::after {
  box-sizing: border-box;
}
.media-minimal-skin img,
.media-minimal-skin video,
.media-minimal-skin svg {
  display: block;
  max-width: 100%;
}
.media-minimal-skin button {
  font: inherit;
}
.media-minimal-skin [hidden][hidden] {
  /* Keep authored templates hidden even when component classes set display. */
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .media-minimal-skin {
    interpolate-size: allow-keywords;
  }
}

/* ==========================================================================
   Root Container
   ========================================================================== */

.media-minimal-skin {
  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));
  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));
  --media-icon-size: 18px;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  container: media-root / inline-size;
  font-family:
    Inter Variable,
    Inter,
    ui-sans-serif,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  line-height: 1.5;
  letter-spacing: normal;
  outline: 2px solid transparent;
  outline-offset: -4px;
  border-radius: var(--media-border-radius, 0.75rem);
  isolation: isolate;
  transition-timing-function: ease-out;
  transition-duration: 100ms;
  transition-property: outline-offset, outline-color;

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }

  & > * {
    font-size: 0.75rem; /* 12px at 100% font size */

    @container media-root (width > 48rem) {
      font-size: 0.875rem; /* 14px at 100% font size */
    }
  }
}

/* ==========================================================================
   Media Element
   ========================================================================== */

.media-minimal-skin ::slotted(video),
.media-minimal-skin video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
}
.media-minimal-skin ::slotted(video) {
  border-radius: var(--media-video-border-radius);
}
.media-minimal-skin video {
  border-radius: inherit;
}

.media-minimal-skin:fullscreen ::slotted(video),
.media-minimal-skin:fullscreen video {
  object-fit: contain;
}

/* ==========================================================================
   Overlay / Scrim
   ========================================================================== */

.media-minimal-skin .media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0));
  border-radius: inherit;
  opacity: 0;
  backdrop-filter: blur(0) saturate(1);
  transition-timing-function: ease-out;
  transition-duration: var(--media-controls-transition-duration);
  transition-property: opacity, backdrop-filter;
}

.media-minimal-skin .media-error ~ .media-overlay {
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-duration: var(--media-error-dialog-transition-duration);
}

.media-minimal-skin .media-controls[data-visible] ~ .media-overlay,
.media-minimal-skin .media-error[data-open] ~ .media-overlay {
  opacity: 1;
}

.media-minimal-skin .media-error[data-open] ~ .media-overlay {
  backdrop-filter: blur(16px) saturate(1.2);
}

/* ==========================================================================
   Buffering Indicator
   ========================================================================== */

.media-minimal-skin .media-buffering-indicator {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: oklch(1 0 0);
  pointer-events: none;

  &:not([data-visible]) {
    --media-spinner-animation: none;
  }

  &[data-visible] {
    display: flex;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-minimal-skin .media-error:not([data-open]) {
  display: none;
}

.media-minimal-skin .media-error__title {
  font-weight: 600;
  line-height: 1.25;
}

.media-minimal-skin .media-error__description {
  overflow-wrap: anywhere;
  opacity: 0.7;
}

.media-minimal-skin .media-error__actions {
  display: flex;
  gap: 0.5rem;

  & > * {
    flex: 1;
  }
}

.media-minimal-skin .media-error[data-open] ~ .media-controls * {
  visibility: hidden;
}

/* ==========================================================================
   Controls
   ========================================================================== */

.media-minimal-skin .media-controls {
  display: flex;
  align-items: center;
  container: media-controls / inline-size;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  background-color: var(--media-controls-background-color);
  backdrop-filter: var(--media-controls-backdrop-filter);
}

/* ==========================================================================
   Time Controls & Display
   ========================================================================== */

.media-minimal-skin .media-time-controls {
  display: flex;
  flex: 1;
  flex-direction: row-reverse;
  gap: 0.75rem;
  align-items: center;
  container: media-time-controls / inline-size;
}

.media-minimal-skin .media-time-group {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.media-minimal-skin .media-time {
  font-variant-numeric: tabular-nums;
}

.media-minimal-skin .media-time--current,
.media-minimal-skin .media-time-separator {
  display: none;
}

@container media-root (width > 42rem) {
  .media-minimal-skin .media-time-controls {
    flex-direction: row;
  }

  .media-minimal-skin .media-time--duration,
  .media-minimal-skin .media-time-separator {
    color: oklch(from currentColor l c h / 0.6);
  }

  .media-minimal-skin .media-time--current,
  .media-minimal-skin .media-time-separator {
    display: inline;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base button */
.media-minimal-skin .media-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border: none;
  border-radius: 0.5rem;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: background-color, outline-offset, scale;
  /* Fix weird jumping when clicking on the buttons in Safari. */
  will-change: scale;

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }

  &:active {
    scale: 0.98;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(1);
  }

  &[data-availability="unavailable"],
  &[data-availability="unsupported"] {
    display: none;
  }
}

@supports (corner-shape: squircle) {
  .media-minimal-skin .media-button {
    border-radius: 1rem;
    corner-shape: squircle;
  }
}

/* Primary button variant */
.media-minimal-skin .media-button--primary {
  font-weight: 500;
  color: oklch(0 0 0);
  text-shadow: none;
  background: oklch(1 0 0);
}

/* Subtle button variant */
.media-minimal-skin .media-button--subtle {
  color: inherit;
  text-shadow: inherit;
  background: transparent;

  &:hover,
  &:focus-visible,
  &[aria-expanded="true"] {
    background: oklch(from currentColor l c h / 0.1);
  }
}

/* Icon button variant */
.media-minimal-skin .media-button--icon {
  display: grid;
  width: 2.375rem;
  aspect-ratio: 1;
  padding: 0;

  &:active {
    scale: 0.9;
  }

  & .media-icon {
    grid-area: 1 / 1;
    transition-behavior: allow-discrete;
    transition-property: display, opacity;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
  }
}

/* Seek button */
.media-minimal-skin .media-button--seek {
  & .media-icon__label {
    position: absolute;
    right: -1px;
    bottom: -3px;
    font-size: 10px; /* Hard coded due to size limitations. */
    font-weight: 480;
    font-variant-numeric: tabular-nums;
  }

  &:has(.media-icon--flipped) .media-icon__label {
    right: unset;
    left: -1px;
  }
}

/* Playback rate button */
.media-minimal-skin .media-button--playback-rate {
  padding: 0;

  &::after {
    width: 4ch;
    font-variant-numeric: tabular-nums;
    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);
  }
}

/* ==========================================================================
   Button Groups
   ========================================================================== */

.media-minimal-skin .media-button-group {
  display: flex;
  gap: 0.075rem;
  align-items: center;

  @container media-root (width > 42rem) {
    gap: 0.125rem;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.media-minimal-skin .media-icon__container {
  position: relative;
}
.media-minimal-skin .media-icon {
  flex-shrink: 0;
  width: var(--media-icon-size);
  height: var(--media-icon-size);
}
.media-minimal-skin .media-icon--flipped {
  scale: -1 1;
}

/* ==========================================================================
   Poster Image
   ========================================================================== */

.media-minimal-skin media-poster,
.media-minimal-skin > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.25s;
}
.media-minimal-skin media-poster:not([data-visible]),
.media-minimal-skin > img:not([data-visible]) {
  opacity: 0;
}
.media-minimal-skin media-poster ::slotted(img),
.media-minimal-skin media-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: var(--media-video-border-radius);
}
.media-minimal-skin > img {
  object-fit: var(--media-object-fit, contain);
  object-position: var(--media-object-position, center);
  border-radius: inherit;
}

.media-minimal-skin:fullscreen media-poster ::slotted(img),
.media-minimal-skin:fullscreen media-poster img,
.media-minimal-skin:fullscreen > img {
  object-fit: contain;
}

/* ==========================================================================
   Media preview
   ========================================================================== */
.media-minimal-skin .media-preview {
  pointer-events: none;

  & .media-preview__thumbnail-wrapper {
    position: relative;
    background-color: oklch(0 0 0 / 0.9);
    border-radius: 0.5rem;
  }
  & .media-preview__thumbnail {
    display: block;
    border-radius: inherit;
  }

  & .media-preview__time {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
  }

  & .media-overlay {
    opacity: 1;
  }

  & .media-preview__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    translate: -50% -50%;
  }

  & .media-preview__thumbnail,
  & .media-preview__spinner {
    transition: opacity 150ms ease-out;
  }

  &:not(:has(.media-preview__thumbnail[data-loading])) {
    & .media-preview__spinner {
      --media-spinner-animation: none;
    }
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    & .media-preview__thumbnail {
      opacity: 0;
    }
    & .media-preview__spinner {
      opacity: 1;
    }
  }
}

/* ==========================================================================
   Slider
   ========================================================================== */

.media-minimal-skin .media-slider {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border-radius: calc(infinity * 1px);

  &[data-orientation="horizontal"] {
    width: 100%;
    min-width: 5rem;
    height: 2rem;
  }

  &[data-orientation="vertical"] {
    width: 2rem;
    height: 4.5rem;
  }
}

/* Track */
.media-minimal-skin .media-slider__track {
  position: relative;
  overflow: hidden;
  user-select: none;
  background-color: oklch(from currentColor l c h / 0.2);
  border-radius: inherit;
  isolation: isolate;

  &[data-orientation="horizontal"] {
    width: 100%;
    height: 0.1875rem;
  }

  &[data-orientation="vertical"] {
    width: 0.1875rem;
    height: 100%;
  }
}

/* Thumb */
.media-minimal-skin .media-slider__thumb {
  position: absolute;
  z-index: 10;
  width: 0.75rem;
  height: 0.75rem;
  user-select: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
  background-color: currentColor;
  border-radius: calc(infinity * 1px);
  box-shadow:
    0 0 0 1px var(--media-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),
    0 1px 3px 0 oklch(0 0 0 / 0.15),
    0 1px 2px -1px oklch(0 0 0 / 0.15);
  opacity: 0;
  transform-origin: center;
  scale: 0.7;
  translate: -50% -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: opacity, scale, outline-offset;

  &[data-orientation="horizontal"] {
    top: 50%;
    left: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    top: calc(100% - var(--media-slider-fill));
    left: 50%;
  }

  &:focus-visible {
    outline-color: currentColor;
    outline-offset: 2px;
  }
}

.media-minimal-skin .media-slider:hover .media-slider__thumb,
.media-minimal-skin .media-slider:focus-within .media-slider__thumb,
.media-minimal-skin .media-slider__thumb--persistent {
  opacity: 1;
  scale: 1;
}

/* Shared track fills */
.media-minimal-skin .media-slider__buffer,
.media-minimal-skin .media-slider__fill {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.media-minimal-skin .media-slider__buffer[data-orientation="horizontal"],
.media-minimal-skin .media-slider__fill[data-orientation="horizontal"] {
  inset-block: 0;
  left: 0;
}

.media-minimal-skin .media-slider__buffer[data-orientation="vertical"],
.media-minimal-skin .media-slider__fill[data-orientation="vertical"] {
  inset-inline: 0;
  bottom: 0;
}

/* Buffer */
.media-minimal-skin .media-slider__buffer {
  background-color: oklch(from currentColor l c h / 0.2);
  transition-timing-function: ease-out;
  transition-duration: 0.25s;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-buffer);
    transition-property: width;
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-buffer);
    transition-property: height;
  }
}

/* Fill */
.media-minimal-skin .media-slider__fill {
  background-color: currentColor;

  &[data-orientation="horizontal"] {
    width: var(--media-slider-fill);
  }

  &[data-orientation="vertical"] {
    height: var(--media-slider-fill);
  }
}

/* Dragging — thumb and fill follow the pointer position */
.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
  left: var(--media-slider-pointer);
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
  top: calc(100% - var(--media-slider-pointer));
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
  width: var(--media-slider-pointer);
}

.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
  height: var(--media-slider-pointer);
}

/* ==========================================================================
   Popups & Animations
   ========================================================================== */

.media-minimal-skin .media-popover,
.media-minimal-skin .media-tooltip {
  margin: 0;
  overflow: visible;
  color: inherit;
  border: 0;
  transition-timing-function: var(--media-popup-transition-timing-function);
  transition-duration: var(--media-popup-transition-duration);
  transition-property: scale, opacity, filter;

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    filter: blur(8px);
    scale: 0.5;
  }

  &[data-instant] {
    transition-duration: 0ms;
  }

  &[data-side="top"] {
    transform-origin: bottom;
  }
  &[data-side="bottom"] {
    transform-origin: top;
  }
  &[data-side="left"] {
    transform-origin: right;
  }
  &[data-side="right"] {
    transform-origin: left;
  }

  /* Safe area between trigger and popup */
  &::before {
    position: absolute;
    pointer-events: inherit;
    content: "";
  }

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    inset-inline: 0;
    width: 100%;
  }
  &[data-side="top"]::before {
    top: 100%;
  }
  &[data-side="bottom"]::before {
    bottom: 100%;
  }

  &[data-side="left"]::before,
  &[data-side="right"]::before {
    inset-block: 0;
    height: 100%;
  }
  &[data-side="left"]::before {
    left: 100%;
  }
  &[data-side="right"]::before {
    right: 100%;
  }
}

.media-minimal-skin .media-popover {
  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-popover-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-popover-side-offset);
  }
}

.media-minimal-skin .media-tooltip {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem; /* 12px at 100% font size */
  color: var(--media-tooltip-text-color);
  white-space: nowrap;
  background-color: var(--media-tooltip-background-color);
  border-radius: 0.5rem;
  box-shadow:
    0 0 0 1px var(--media-tooltip-border-color),
    0 4px 6px -1px oklch(0 0 0 / 0.1),
    0 2px 4px -2px oklch(0 0 0 / 0.1);
  backdrop-filter: var(--media-tooltip-backdrop-filter);

  &[data-side="top"]::before,
  &[data-side="bottom"]::before {
    height: var(--media-tooltip-side-offset);
  }
  &[data-side="left"]::before,
  &[data-side="right"]::before {
    width: var(--media-tooltip-side-offset);
  }
}

.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
  display: none;
}

/* ==========================================================================
   Native Caption Track
   ========================================================================== */

.media-minimal-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: 25ms;
  --media-caption-track-y: -0.5rem;

  &:has(.media-controls[data-visible]) {
    --media-caption-track-y: -5rem;
  }

  @container media-root (width > 42rem) {
    &:has(.media-controls[data-visible]) > * {
      --media-caption-track-y: -3rem;
    }
  }
}

.media-minimal-skin video::-webkit-media-text-track-container {
  z-index: 1;
  font-family: inherit;
  scale: 0.98;
  translate: 0 var(--media-caption-track-y);
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
}

/* ==========================================================================
  Input Feedback
  ========================================================================== */

.media-minimal-skin .media-input-feedback {
  position: absolute;
  inset-inline: 0;
  top: 0;
  bottom: 3.5rem; /* Shift up a little in smaller containers */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  color: var(--media-color-primary, oklch(1 0 0));
  pointer-events: none;
  border-radius: inherit;

  @container media-root (width > 24rem) {
    bottom: 0;
  }
}

/* --- Feedback islands ------------------------------------------------------- */

.media-minimal-skin .media-input-feedback-island {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
  padding-bottom: 8rem;
  color: inherit;
  text-shadow: 0 1px 0 var(--media-current-shadow-color);
  pointer-events: none;
  background-image: linear-gradient(to bottom, oklch(0 0 0 / 0.35), oklch(0 0 0 / 0.2) 3rem, oklch(0 0 0 / 0));
  transform-origin: top center;
  transition-timing-function: ease-out;
  transition-duration: 100ms;

  .media-input-feedback-island__content {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0.625rem;
  }

  .media-icon {
    display: none;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));
  }

  .media-input-feedback-island__value {
    margin-left: auto;
  }

  @media (pointer: fine) {
    transition-property: translate, filter, opacity;
    will-change: translate, filter, opacity;
  }

  @media (pointer: coarse) {
    transition-property: translate, opacity;
    will-change: translate, opacity;
  }

  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    transition-property: translate, filter, opacity;
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    .media-input-feedback-island__content {
      background: var(--media-controls-background-color);
      border-radius: 0.5rem;
    }
  }

  /* Default hidden state */
  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transition-timing-function: ease-in;
    transition-duration: 400ms;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: no-preference) {
      &[data-ending-style] {
        translate: 0 -100%;
      }
    }
  }
}

.media-minimal-skin .media-input-feedback-island--volume {
  .media-input-feedback-island__content {
    width: min(80%, 14rem);
  }

  .media-input-feedback-island__progress {
    --media-progress-fill: var(--media-volume-fill);
    width: 100%;
    height: 0.1875rem;
    background-image: linear-gradient(
      to right,
      currentColor 0%,
      currentColor var(--media-progress-fill),
      oklch(from currentColor l c h / 0.2) var(--media-progress-fill),
      oklch(from currentColor l c h / 0.2) 100%
    );
    border-radius: calc(Infinity * 1px);
    box-shadow: 0 1px 0 var(--media-current-shadow-color-subtle);
  }
}

.media-minimal-skin .media-input-feedback-island--volume[data-level="high"] .media-icon--volume-high,
.media-minimal-skin .media-input-feedback-island--volume[data-level="low"] .media-icon--volume-low,
.media-minimal-skin .media-input-feedback-island--volume[data-level="off"] .media-icon--volume-off {
  display: block;
}

.media-minimal-skin .media-input-feedback-island--status[data-status="captions-on"] .media-icon--captions-on,
.media-minimal-skin .media-input-feedback-island--status[data-status="captions-off"] .media-icon--captions-off,
.media-minimal-skin .media-input-feedback-island--status[data-status="fullscreen"] .media-icon--fullscreen-enter,
.media-minimal-skin .media-input-feedback-island--status[data-status="exit-fullscreen"] .media-icon--fullscreen-exit,
.media-minimal-skin .media-input-feedback-island--status[data-status="pip"] .media-icon--pip-enter,
.media-minimal-skin .media-input-feedback-island--status[data-status="exit-pip"] .media-icon--pip-exit {
  display: block;
}

/* --- Boundary shake ------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .media-minimal-skin .media-input-feedback-island--volume[data-min] .media-input-feedback-island__content,
  .media-minimal-skin .media-input-feedback-island--volume[data-max] .media-input-feedback-island__content {
    animation: media-shake 300ms ease-in-out;
  }
}

/* --- Bubble ---------------------------------------------------------------- */

.media-minimal-skin .media-input-feedback-bubble {
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 2; /* default to center for status bubbles and undirected seeks */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: opacity 250ms ease-out;

  @container media-root (width > 24rem) {
    padding: 2rem;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transition-timing-function: ease-in;
    transition-duration: 200ms;
  }
}
/* Direction placement — seek bubbles move to the side implied by their direction. */
.media-minimal-skin .media-input-feedback-bubble[data-direction="backward"] {
  grid-column: 1;
  justify-self: left;
}

.media-minimal-skin .media-input-feedback-bubble:not([data-direction]) {
  grid-column: 2;
  transition-timing-function:
    ease-out, linear(0, 0.12 1.5%, 1.35 9.7%, 2.2 13.9%, 3 19.9%, 2.7 21.8%, 0.62 37.5%, 0.96 50.9%, 1);
  transition-duration: 600ms;
  transition-property: opacity, scale;

  @media (prefers-reduced-motion: reduce) {
    transition: opacity 100ms ease-out;
  }

  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    scale: 0.8;
    transition-timing-function: ease-in;
    transition-duration: 200ms;
  }
}

.media-minimal-skin .media-input-feedback-bubble[data-direction="forward"] {
  grid-column: 3;
  justify-self: right;
}

/* --- Bubble icons ---------------------------------------------------------- */

.media-minimal-skin .media-input-feedback-bubble .media-icon {
  display: none;
  width: 36px;
  height: 36px;
}

/* seek: seek icon, flipped for backward */
.media-minimal-skin .media-input-feedback-bubble[data-direction] .media-icon--seek {
  display: block;
}

.media-minimal-skin .media-input-feedback-bubble[data-direction="backward"] .media-icon--seek {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  .media-minimal-skin
    .media-input-feedback-bubble[data-direction="forward"]:not([data-starting-style])
    .media-icon--seek {
    animation: media-slide-in-forward 300ms ease-in-out;
  }

  .media-minimal-skin
    .media-input-feedback-bubble[data-direction="backward"]:not([data-starting-style])
    .media-icon--seek {
    animation: media-slide-in-backward 300ms ease-in-out;
  }

  .media-minimal-skin .media-input-feedback-island--status[data-status]:not([data-starting-style]) .media-icon,
  .media-minimal-skin .media-input-feedback-bubble[data-status]:not([data-starting-style]) .media-icon {
    animation: media-pop-in 250ms ease-out;
  }
}

.media-minimal-skin .media-input-feedback-bubble[data-status="pause"] .media-icon--pause,
.media-minimal-skin .media-input-feedback-bubble[data-status="play"] .media-icon--play {
  display: block;
}

/* ==========================================================================
   Icon State Visibility for Video Skins

   Data-attribute-driven visibility rules for multi-state icon buttons.
   Uses :is() with both element selectors (for HTML custom element wrappers)
   and class selectors (for React rendered SVG elements).
   ========================================================================== */

/* --- All icons hidden by default --- */

.media-button--play .media-icon--restart,
.media-button--play .media-icon--play,
.media-button--play .media-icon--pause,
.media-button--mute .media-icon--volume-off,
.media-button--mute .media-icon--volume-low,
.media-button--mute .media-icon--volume-high,
.media-button--fullscreen .media-icon--fullscreen-enter,
.media-button--fullscreen .media-icon--fullscreen-exit,
.media-button--pip .media-icon--pip-enter,
.media-button--pip .media-icon--pip-exit,
.media-button--cast .media-icon--cast-enter,
.media-button--cast .media-icon--cast-exit,
.media-button--captions .media-icon--captions-off,
.media-button--captions .media-icon--captions-on {
  display: none;
  opacity: 0;
}

/* --- Active icon per state --- */

/* Play: ended → restart */
.media-button--play[data-ended] .media-icon--restart,
/* Play: paused (not ended) → play */
.media-button--play:not([data-ended])[data-paused] .media-icon--play,
/* Play: playing (not paused, not ended) → pause */
.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
/* Mute: muted → volume off */
.media-button--mute[data-muted] .media-icon--volume-off,
/* Mute: volume low (not muted) → volume low */
.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
/* Mute: volume high (not muted, not low) → volume high */
.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
/* Fullscreen: not fullscreen → enter */
.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
/* Fullscreen: fullscreen → exit */
.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
/* Picture-in-Picture: not active → enter */
.media-button--pip:not([data-pip]) .media-icon--pip-enter,
/* Picture-in-Picture: active → exit */
.media-button--pip[data-pip] .media-icon--pip-exit,
/* Cast: not connected → enter */
.media-button--cast:not([data-cast-state="connected"]) .media-icon--cast-enter,
/* Cast: connected → exit */
.media-button--cast[data-cast-state="connected"] .media-icon--cast-exit,
/* Captions: not active → captions off */
.media-button--captions:not([data-active]) .media-icon--captions-off,
/* Captions: active → captions on */
.media-button--captions[data-active] .media-icon--captions-on {
  display: block;
  opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Global @keyframes for all video skins (CSS & Tailwind)                     */
/* -------------------------------------------------------------------------- */

@keyframes media-shake {
  0%,
  100% {
    translate: 0 0;
  }
  20% {
    translate: -6px 0;
  }
  40% {
    translate: 4px 0;
  }
  60% {
    translate: -2px 0;
  }
  80% {
    translate: 1px 0;
  }
}

@keyframes media-slide-in-forward {
  from {
    translate: -60% 0;
    opacity: 0;
  }
}

@keyframes media-slide-in-backward {
  from {
    translate: 60% 0;
    opacity: 0;
  }
}

@keyframes media-pop-in {
  from {
    scale: 0.8;
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Global @properties for all video skins (CSS & Tailwind)                    */
/* -------------------------------------------------------------------------- */

@property --media-progress-fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}


/* ==========================================================================
   Root
   ========================================================================== */

.media-minimal-skin--video {
  --media-border-color: oklch(0 0 0 / 0.15);
  --media-video-border-radius: var(--media-border-radius, 0.75rem);
  --media-controls-background-color: transparent;
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 150ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: ease-out;
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;
  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
  --media-tooltip-border-color: transparent;
  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
  --media-tooltip-text-color: currentColor;
  --media-tooltip-side-offset: 0.5rem;
  --media-popover-side-offset: 1.5rem;
  overflow: clip;
  background: oklch(0 0 0);

  @media (prefers-reduced-motion: reduce) {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-popup-transition-duration: 0ms;
  }

  @media (prefers-color-scheme: dark) {
    --media-border-color: oklch(1 0 0 / 0.15);
  }

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    --media-controls-background-color: oklch(0 0 0);
    --media-tooltip-background-color: oklch(0 0 0);
  }

  @container media-root (width > 42rem) {
    & > * {
      --media-popover-side-offset: 0rem;
    }
  }

  &:has(.media-controls:not([data-visible])) {
    /* Slight delay to hide controls on non-touch devices after interaction */
    @media (pointer: fine) {
      --media-controls-transition-duration: 300ms;
    }
    @media (pointer: coarse) {
      --media-controls-transition-duration: 150ms;
    }
    @media (prefers-reduced-motion: reduce) {
      --media-controls-transition-duration: 50ms;
    }
  }

  /* Inner border ring */
  &::after {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-border-color);
  }

  /* Fullscreen */
  &:fullscreen {
    --media-border-radius: 0;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-minimal-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  outline: none;
}

.media-minimal-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 16rem;
  padding: 1rem;
  color: oklch(1 0 0);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
  pointer-events: auto;
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-property: opacity, scale;
}

.media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}
.media-minimal-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-minimal-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.media-minimal-skin--video .media-error__title {
  font-size: 1.125rem;
}

.media-minimal-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* ==========================================================================
  Controls (hide/show behavior)
  ========================================================================== */

.media-minimal-skin--video .media-controls {
  position: absolute;
  inset-inline: 0.25rem;
  bottom: 0.25rem;
  z-index: 10;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  padding: 0.25rem;
  color: oklch(1 0 0);
  border-radius: 0.75rem;
  transition-timing-function: var(--media-controls-transition-timing-function);
  transition-duration: var(--media-controls-transition-duration);

  @media (pointer: fine) {
    transition-property: translate, filter, opacity;
    will-change: translate, filter, opacity;
  }

  @media (pointer: coarse) {
    transition-property: translate, opacity;
    will-change: translate, opacity;
  }

  &:not([data-visible]) {
    pointer-events: none;
    opacity: 0;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: no-preference) {
      translate: 0 100%;
    }
  }

  & .media-time-controls {
    flex: 0 0 100%;
    order: -1;
    padding-inline: 0.625rem;
  }

  & .media-button-group:first-child {
    flex: 1;
    text-align: left;
  }

  & .media-button-group:last-child {
    flex: 1;
    justify-content: end;
  }

  @container media-root (width > 42rem) {
    inset-inline: 0.5rem;
    bottom: 0.5rem;
    flex-wrap: nowrap;

    & .media-time-controls {
      flex: 1;
      order: unset;
    }

    & .media-button-group:first-child,
    & .media-button-group:last-child {
      flex: 0 0 auto;
    }
  }
}

/* Hide cursor when controls are hidden */
.media-minimal-skin--video:has(.media-controls:not([data-visible])) {
  cursor: none;
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.media-minimal-skin--video .media-slider__track {
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}

/* ==========================================================================
   Popups & Animations
   ========================================================================== */

.media-minimal-skin--video .media-popover--volume {
  padding-block: 0.75rem;
  background: transparent;
  border-radius: 0.75rem;

  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
    background: var(--media-controls-background-color);
  }
}

/* ==========================================================================
   Slider preview
   ========================================================================== */

.media-minimal-skin--video .media-slider__preview {
  --media-preview-max-width: 11rem;
  --media-preview-padding: -0.5rem;
  /**
    Inset is the difference between the container width and the slider (100%) width.
    We only add to the end as we render the time there.
  */
  --media-preview-inset: calc(100cqi - 100%);

  position: absolute;
  bottom: 100%;
  left: clamp(
    calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)),
    var(--media-slider-pointer),
    calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset))
  );
  opacity: 0;
  filter: blur(8px);
  transform-origin: bottom;
  scale: 0.8;
  translate: -50%;
  transition-timing-function: ease-out;
  transition-duration: 150ms;
  transition-property: scale, opacity, filter;

  @container media-root (width > 42rem) {
    bottom: calc(100% + 0.25rem);
    left: var(--media-slider-pointer);
  }

  & .media-preview__thumbnail-wrapper {
    position: relative;

    &::after {
      position: absolute;
      inset: 0;
      content: "";
      border-radius: inherit;
      box-shadow:
        0 0 0 1px oklch(0 0 0 / 0.05),
        0 1px 3px 0 oklch(0 0 0 / 0.2),
        0 1px 2px -1px oklch(0 0 0 / 0.2);
    }
  }

  & .media-preview__thumbnail {
    max-width: var(--media-preview-max-width);
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    max-height: 6rem;
  }
}
.media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  filter: blur(0);
  scale: 1;
}

CSP

If your application uses a Content Security Policy, you may need to allow additional sources for player features to work correctly.

Common requirements

media-src must allow your media URLs.
img-src must allow any poster or thumbnail image URLs.
connect-src must allow HLS manifests, playlists, captions, and segment requests when using HLS playback.
media-src blob: is required when using the HLS player variants, which use MSE-backed playback.
worker-src blob: is required when using the hls.js player variants.
style-src 'unsafe-inline' is currently required for some player UI and HTML player styling behavior.

Example

Content-Security-Policy:
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https: data: blob:;
  media-src 'self' https: blob:;
  connect-src 'self' https:;
  worker-src 'self' blob:;

Choose your JS framework

Choose your use case

Choose skin

Choose your media source type

Install Video.js

Use your player

Create your player

Use your player

Ejecting a skin

CSP

Common requirements

Example

See also