/**
 * Video.js 10 does not size itself.
 *
 * <video-player> is display:contents and the skin's built-in <media-container>
 * is height:100%, so with nothing to resolve against the whole player -- player,
 * skin, container and <video> -- computes to height:0. The still frame you see
 * for a moment is the un-upgraded native <video>; it "vanishes" the instant the
 * custom elements upgrade and the collapsed layout takes over.
 *
 * Per the docs, the outer size and aspect ratio belong on the skin:
 * @see https://videojs.org/docs/framework/html/reference/player-container#layout-and-fullscreen
 *
 * Override per instance with --videojs-aspect-ratio (e.g. 4 / 3, 21 / 9).
 */
video-skin,
video-minimal-skin {
  width: 100%;
  aspect-ratio: var(--videojs-aspect-ratio, 16 / 9);

  /* Packaged v10 skins round their corners; square them off. Override this
     token per instance (e.g. 8px) if you want some rounding back.
     @see https://videojs.org/docs/framework/html/how-to/customize-skins */
  --media-border-radius: 5px 5px 0px 0px;

  /* Safari fix: the packaged skin styles its control surfaces with
     `backdrop-filter` but ships no `-webkit-backdrop-filter`, which Safari
     (17.x included) still requires -- so the frosted background never paints
     and the light icons become invisible (but clickable) on bright video.
     Drop the blur (Chrome-only anyway) and give the controls a solid scrim so
     they're clearly visible in every browser.
     NB: these are internal skin tokens, safe while the CDN URL is pinned to
     10.0.0-rc.2; re-verify them if you bump the video.js version. */
  --media-backdrop-filter-surface: none;
  --media-backdrop-filter-indicator: none;
  --media-backdrop-filter-dialog: none;
  --media-controls: oklch(0% 0 0 / 0.6);
}

/**
 * controls: false -- a bare <background-video>. It has no layout box of its
 * own, so the wrapper defines the size and the element fills it.
 */
.videojs-background {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--videojs-aspect-ratio, 16 / 9);
  pointer-events: none;
}

.videojs-background background-video {
  --media-object-fit: cover;

  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--media-object-fit);
}