@videojs/html 10.0.0-beta.11 → 10.0.0-beta.13

package/dist/default/define/ui/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/define/ui/thumbnail.ts"],"sourcesContent":["import { ThumbnailElement } from '../../ui/thumbnail/thumbnail-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ThumbnailElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ThumbnailElement.tagName]: ThumbnailElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,iBAAiB"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/define/ui/thumbnail.ts"],"sourcesContent":["import { ThumbnailElement } from '../../ui/thumbnail/thumbnail-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(ThumbnailElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [ThumbnailElement.tagName]: ThumbnailElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,iBAAiB"}

package/dist/default/define/ui/time-group.js

@@ -1,8 +1,7 @@
 import { TimeGroupElement } from "../../ui/time/time-group-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/ui/time-group.ts
 safeDefine(TimeGroupElement);
-
 //#endregion
+
 //# sourceMappingURL=time-group.js.map

package/dist/default/define/ui/time-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/define/ui/time-group.ts"],"sourcesContent":["import { TimeGroupElement } from '../../ui/time/time-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeGroupElement.tagName]: TimeGroupElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,iBAAiB"}
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/define/ui/time-group.ts"],"sourcesContent":["import { TimeGroupElement } from '../../ui/time/time-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeGroupElement.tagName]: TimeGroupElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,iBAAiB"}

package/dist/default/define/ui/time-separator.js

@@ -1,8 +1,7 @@
 import { TimeSeparatorElement } from "../../ui/time/time-separator-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/ui/time-separator.ts
 safeDefine(TimeSeparatorElement);
-
 //#endregion
+
 //# sourceMappingURL=time-separator.js.map

package/dist/default/define/ui/time-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/define/ui/time-separator.ts"],"sourcesContent":["import { TimeSeparatorElement } from '../../ui/time/time-separator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeSeparatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSeparatorElement.tagName]: TimeSeparatorElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,qBAAqB"}
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/define/ui/time-separator.ts"],"sourcesContent":["import { TimeSeparatorElement } from '../../ui/time/time-separator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeSeparatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSeparatorElement.tagName]: TimeSeparatorElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,qBAAqB"}

package/dist/default/define/ui/time-slider.js

@@ -7,7 +7,6 @@ import { SliderValueElement } from "../../ui/slider/slider-value-element.js";
 import { TimeSliderElement } from "../../ui/time-slider/time-slider-element.js";
 import { safeDefine } from "../safe-define.js";
 import { SliderPreviewElement } from "../../ui/slider/slider-preview-element.js";
-
 //#region src/define/ui/time-slider.ts
 safeDefine(TimeSliderElement);
 safeDefine(SliderBufferElement);
@@ -17,6 +16,6 @@ safeDefine(SliderThumbElement);
 safeDefine(SliderThumbnailElement);
 safeDefine(SliderTrackElement);
 safeDefine(SliderValueElement);
-
 //#endregion
+
 //# sourceMappingURL=time-slider.js.map

package/dist/default/define/ui/time-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider.js","names":[],"sources":["../../../../src/define/ui/time-slider.ts"],"sourcesContent":["import { SliderBufferElement } from '../../ui/slider/slider-buffer-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderThumbnailElement } from '../../ui/slider/slider-thumbnail-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { TimeSliderElement } from '../../ui/time-slider/time-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(TimeSliderElement);\nsafeDefine(SliderBufferElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderThumbnailElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSliderElement.tagName]: TimeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;;;AAWA,WAAW,kBAAkB;AAC7B,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,uBAAuB;AAClC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"time-slider.js","names":[],"sources":["../../../../src/define/ui/time-slider.ts"],"sourcesContent":["import { SliderBufferElement } from '../../ui/slider/slider-buffer-element';\nimport { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderThumbnailElement } from '../../ui/slider/slider-thumbnail-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { TimeSliderElement } from '../../ui/time-slider/time-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(TimeSliderElement);\nsafeDefine(SliderBufferElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderThumbnailElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeSliderElement.tagName]: TimeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;;AAWA,WAAW,kBAAkB;AAC7B,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,uBAAuB;AAClC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}

package/dist/default/define/ui/time.js

@@ -2,11 +2,10 @@ import { TimeElement } from "../../ui/time/time-element.js";
 import { TimeGroupElement } from "../../ui/time/time-group-element.js";
 import { TimeSeparatorElement } from "../../ui/time/time-separator-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/ui/time.ts
 safeDefine(TimeElement);
 safeDefine(TimeGroupElement);
 safeDefine(TimeSeparatorElement);
-
 //#endregion
+
 //# sourceMappingURL=time.js.map

package/dist/default/define/ui/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../../../src/define/ui/time.ts"],"sourcesContent":["import { TimeElement } from '../../ui/time/time-element';\nimport { TimeGroupElement } from '../../ui/time/time-group-element';\nimport { TimeSeparatorElement } from '../../ui/time/time-separator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeElement);\nsafeDefine(TimeGroupElement);\nsafeDefine(TimeSeparatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeElement.tagName]: TimeElement;\n  }\n}\n"],"mappings":";;;;;;AAKA,WAAW,YAAY;AACvB,WAAW,iBAAiB;AAC5B,WAAW,qBAAqB"}
+{"version":3,"file":"time.js","names":[],"sources":["../../../../src/define/ui/time.ts"],"sourcesContent":["import { TimeElement } from '../../ui/time/time-element';\nimport { TimeGroupElement } from '../../ui/time/time-group-element';\nimport { TimeSeparatorElement } from '../../ui/time/time-separator-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TimeElement);\nsafeDefine(TimeGroupElement);\nsafeDefine(TimeSeparatorElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TimeElement.tagName]: TimeElement;\n  }\n}\n"],"mappings":";;;;;AAKA,WAAW,YAAY;AACvB,WAAW,iBAAiB;AAC5B,WAAW,qBAAqB"}

package/dist/default/define/ui/tooltip-group.js

@@ -1,8 +1,7 @@
 import { TooltipGroupElement } from "../../ui/tooltip/tooltip-group-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/ui/tooltip-group.ts
 safeDefine(TooltipGroupElement);
-
 //#endregion
+
 //# sourceMappingURL=tooltip-group.js.map

package/dist/default/define/ui/tooltip-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-group.js","names":[],"sources":["../../../../src/define/ui/tooltip-group.ts"],"sourcesContent":["import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipGroupElement.tagName]: TooltipGroupElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,oBAAoB"}
+{"version":3,"file":"tooltip-group.js","names":[],"sources":["../../../../src/define/ui/tooltip-group.ts"],"sourcesContent":["import { TooltipGroupElement } from '../../ui/tooltip/tooltip-group-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipGroupElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipGroupElement.tagName]: TooltipGroupElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,oBAAoB"}

package/dist/default/define/ui/tooltip.js

@@ -1,8 +1,7 @@
 import { TooltipElement } from "../../ui/tooltip/tooltip-element.js";
 import { safeDefine } from "../safe-define.js";
-
 //#region src/define/ui/tooltip.ts
 safeDefine(TooltipElement);
-
 //#endregion
+
 //# sourceMappingURL=tooltip.js.map

package/dist/default/define/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/define/ui/tooltip.ts"],"sourcesContent":["import { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipElement.tagName]: TooltipElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,eAAe"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../src/define/ui/tooltip.ts"],"sourcesContent":["import { TooltipElement } from '../../ui/tooltip/tooltip-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(TooltipElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [TooltipElement.tagName]: TooltipElement;\n  }\n}\n"],"mappings":";;;AAGA,WAAW,eAAe"}

package/dist/default/define/ui/volume-slider.js

@@ -5,7 +5,6 @@ import { SliderValueElement } from "../../ui/slider/slider-value-element.js";
 import { VolumeSliderElement } from "../../ui/volume-slider/volume-slider-element.js";
 import { safeDefine } from "../safe-define.js";
 import { SliderPreviewElement } from "../../ui/slider/slider-preview-element.js";
-
 //#region src/define/ui/volume-slider.ts
 safeDefine(VolumeSliderElement);
 safeDefine(SliderFillElement);
@@ -13,6 +12,6 @@ safeDefine(SliderPreviewElement);
 safeDefine(SliderThumbElement);
 safeDefine(SliderTrackElement);
 safeDefine(SliderValueElement);
-
 //#endregion
+
 //# sourceMappingURL=volume-slider.js.map

package/dist/default/define/ui/volume-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(VolumeSliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;;AASA,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}
+{"version":3,"file":"volume-slider.js","names":[],"sources":["../../../../src/define/ui/volume-slider.ts"],"sourcesContent":["import { SliderFillElement } from '../../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../../ui/slider/slider-thumb-element';\nimport { SliderTrackElement } from '../../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../../ui/slider/slider-value-element';\nimport { VolumeSliderElement } from '../../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from '../safe-define';\n\n// Parent slider first — sub-elements consume its context.\nsafeDefine(VolumeSliderElement);\nsafeDefine(SliderFillElement);\nsafeDefine(SliderPreviewElement);\nsafeDefine(SliderThumbElement);\nsafeDefine(SliderTrackElement);\nsafeDefine(SliderValueElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [VolumeSliderElement.tagName]: VolumeSliderElement;\n  }\n}\n"],"mappings":";;;;;;;;AASA,WAAW,oBAAoB;AAC/B,WAAW,kBAAkB;AAC7B,WAAW,qBAAqB;AAChC,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB;AAC9B,WAAW,mBAAmB"}

package/dist/default/define/video/minimal-skin.css

@@ -27,12 +27,12 @@
    ========================================================================== */
 
 .media-minimal-skin {
+  container: media-root / inline-size;
   position: relative;
   isolation: isolate;
   display: block;
   height: 100%;
   width: 100%;
-  container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
     Inter Variable,
@@ -40,13 +40,20 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: 0.8125rem;
   line-height: 1.5;
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 
-  --media-controls-radius: var(--media-border-radius, 1rem);
+  & > * {
+    font-size: 0.75rem; /* 12px at 100% font size */
+  }
+
+  @container media-root (width > 48rem) {
+    & > * {
+      font-size: 0.875rem; /* 14px at 100% font size */
+    }
+  }
 }
 
 /* ==========================================================================
@@ -82,12 +89,11 @@
   inset: 0;
   border-radius: inherit;
   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));
-  backdrop-filter: blur(0) saturate(1.5);
+  backdrop-filter: blur(0) saturate(1);
   opacity: 0;
   pointer-events: none;
   transition-property: opacity, backdrop-filter;
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: ease-out;
 }
 
@@ -102,7 +108,7 @@
 }
 
 .media-minimal-skin .media-error[data-open] ~ .media-overlay {
-  backdrop-filter: blur(16px) saturate(1.5);
+  backdrop-filter: blur(16px) saturate(1.2);
 }
 
 /* ==========================================================================
@@ -127,6 +133,10 @@
    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;
@@ -163,6 +173,8 @@
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
+  background-color: var(--media-controls-background-color);
+  backdrop-filter: var(--media-controls-backdrop-filter);
   text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }
 
@@ -171,49 +183,42 @@
    ========================================================================== */
 
 .media-minimal-skin .media-time-controls {
+  container: media-time-controls / inline-size;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   flex: 1;
   gap: 0.75rem;
 }
-.media-minimal-skin .media-time {
+
+.media-minimal-skin .media-time-group {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.media-minimal-skin .media-time__value {
+
+.media-minimal-skin .media-time {
   font-variant-numeric: tabular-nums;
 }
-.media-minimal-skin .media-time__value--current,
-.media-minimal-skin .media-time__separator {
+
+.media-minimal-skin .media-time--current,
+.media-minimal-skin .media-time-separator {
   display: none;
 }
-@container media-controls (width > 28rem) {
+
+@container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
   }
-  .media-minimal-skin .media-time__value--duration,
-  .media-minimal-skin .media-time__separator {
+
+  .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__value--current,
-  .media-minimal-skin .media-time__separator {
-    display: inline;
-  }
-}
-
-/* ==========================================================================
-   Button Groups
-   ========================================================================== */
 
-.media-minimal-skin .media-button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.075rem;
-
-  @container media-root (width > 40rem) {
-    gap: 0.125rem;
+  .media-minimal-skin .media-time--current,
+  .media-minimal-skin .media-time-separator {
+    display: inline;
   }
 }
 
@@ -229,10 +234,12 @@
   flex-shrink: 0;
   padding: 0.5rem 1rem;
   border: none;
-  border-radius: calc(var(--media-controls-radius) - var(--media-controls-padding));
+  border-radius: 0.5rem;
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -263,7 +270,7 @@
 /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
 @supports (corner-shape: squircle) {
   .media-minimal-skin .media-button {
-    border-radius: var(--media-controls-radius);
+    border-radius: 1rem;
     /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
     corner-shape: squircle;
   }
@@ -312,7 +319,7 @@
     position: absolute;
     right: -1px;
     bottom: -3px;
-    font-size: 10px;
+    font-size: 10px; /* Hard coded due to size limitations. */
     font-weight: 480;
     font-variant-numeric: tabular-nums;
   }
@@ -321,10 +328,6 @@
     right: unset;
     left: -1px;
   }
-
-  @container media-controls (width < 28rem) {
-    display: none;
-  }
 }
 
 /* Playback rate button */
@@ -338,6 +341,20 @@
   }
 }
 
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-minimal-skin .media-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.075rem;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -401,6 +418,8 @@
    Media preview
    ========================================================================== */
 .media-minimal-skin .media-preview {
+  pointer-events: none;
+
   & .media-preview__thumbnail-wrapper {
     position: relative;
     border-radius: 0.5rem;
@@ -411,9 +430,8 @@
     border-radius: inherit;
   }
 
-  & .media-preview__timestamp {
+  & .media-preview__time {
     display: block;
-    font-variant-numeric: tabular-nums;
     text-align: center;
     margin-top: 0.5rem;
   }
@@ -462,11 +480,11 @@
   &[data-orientation="horizontal"] {
     min-width: 5rem;
     width: 100%;
-    height: 1.25rem;
+    height: 2rem;
   }
 
   &[data-orientation="vertical"] {
-    width: 1.25rem;
+    width: 2rem;
     height: 4.5rem;
   }
 }
@@ -670,15 +688,16 @@
 
 .media-minimal-skin .media-tooltip {
   padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(16px) saturate(1.5);
+  border-radius: 0.5rem;
+  background-color: var(--media-tooltip-background-color);
+  backdrop-filter: var(--media-tooltip-backdrop-filter);
   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);
-  font-size: 0.75rem;
+  color: var(--media-tooltip-text-color);
+  font-size: 0.75rem; /* 12px at 100% font size */
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.75rem;
 
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
@@ -688,14 +707,6 @@
   &[data-side="right"]::before {
     width: var(--media-tooltip-side-offset);
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: oklch(0 0 0 / 0.7);
-  }
-
-  @media (prefers-contrast: more) {
-    background-color: oklch(0 0 0 / 0.9);
-  }
 }
 
 .media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
@@ -708,11 +719,17 @@
 
 .media-minimal-skin {
   --media-caption-track-duration: var(--media-controls-transition-duration);
-  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
+  --media-caption-track-delay: 25ms;
   --media-caption-track-y: -0.5rem;
 
   &:has(.media-controls[data-visible]) {
-    --media-caption-track-y: -3rem;
+    --media-caption-track-y: -5rem;
+  }
+
+  @container media-root (width > 42rem) {
+    &:has(.media-controls[data-visible]) > * {
+      --media-caption-track-y: -3rem;
+    }
   }
 }
 
@@ -835,15 +852,20 @@
   background: oklch(0 0 0);
   --media-border-color: oklch(0 0 0 / 0.15);
   --media-video-border-radius: var(--media-border-radius, 0.75rem);
-  --media-controls-padding: 0.375rem;
+  --media-controls-background-color: transparent;
   --media-controls-transition-duration: 100ms;
-  --media-controls-transition-delay: 0ms;
   --media-controls-transition-timing-function: ease-out;
-  --media-error-dialog-transition-duration: 250ms;
+  --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;
 
   @media (prefers-reduced-motion: reduce) {
     --media-error-dialog-transition-duration: 50ms;
@@ -855,10 +877,20 @@
     --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-delay: 500ms;
       --media-controls-transition-duration: 300ms;
     }
     @media (pointer: coarse) {
@@ -945,15 +977,16 @@
   ========================================================================== */
 
 .media-minimal-skin--video .media-controls {
+  padding: 0.25rem;
+  column-gap: 0.5rem;
+  flex-wrap: wrap;
   position: absolute;
-  bottom: 0;
-  inset-inline: 0;
+  bottom: 0.25rem;
+  inset-inline: 0.25rem;
   z-index: 10;
-  gap: 0.5rem;
-  padding: 2rem var(--media-controls-padding) var(--media-controls-padding) var(--media-controls-padding);
-  color: var(--media-color-primary, oklch(1 0 0));
+  color: oklch(1 0 0);
+  border-radius: 0.75rem;
   transition-duration: var(--media-controls-transition-duration);
-  transition-delay: var(--media-controls-transition-delay);
   transition-timing-function: var(--media-controls-transition-timing-function);
 
   @media (pointer: fine) {
@@ -981,14 +1014,41 @@
     }
   }
 
-  @container media-root (width > 40rem) {
-    gap: 0.875rem;
-    padding: 2.5rem 0.75rem 0.75rem 0.75rem;
+  & .media-time-controls {
+    order: -1;
+    flex: 0 0 100%;
+    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) {
+    flex-wrap: nowrap;
+    bottom: 0.5rem;
+    inset-inline: 0.5rem;
+
+    & .media-time-controls {
+      order: unset;
+      flex: 1;
+    }
+
+    & .media-button-group:first-child,
+    & .media-button-group:last-child {
+      flex: 0 0 auto;
+    }
   }
 }
 
-/* Hide cursor when controls are hidden in fullscreen */
-.media-minimal-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
+/* Hide cursor when controls are hidden */
+.media-minimal-skin--video:has(.media-controls:not([data-visible])) {
   cursor: none;
 }
 
@@ -1005,9 +1065,13 @@
    ========================================================================== */
 
 .media-minimal-skin--video .media-popover--volume {
-  --media-popover-side-offset: 0.5rem;
   background: transparent;
-  padding: 0.25rem;
+  padding-block: 0.75rem;
+  border-radius: 0.75rem;
+
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    background: var(--media-controls-background-color);
+  }
 }
 
 /* ==========================================================================
@@ -1015,9 +1079,21 @@
    ========================================================================== */
 
 .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;
-  left: var(--media-slider-pointer);
-  bottom: calc(100% + 0.5rem);
+  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))
+  );
+  bottom: 100%;
   translate: -50%;
   opacity: 0;
   scale: 0.8;
@@ -1027,6 +1103,11 @@
   transition-timing-function: ease-out;
   transform-origin: bottom;
 
+  @container media-root (width > 42rem) {
+    bottom: calc(100% + 0.25rem);
+    left: var(--media-slider-pointer);
+  }
+
   & .media-preview__thumbnail-wrapper {
     position: relative;
 
@@ -1043,7 +1124,7 @@
   }
 
   & .media-preview__thumbnail {
-    max-width: 11rem;
+    max-width: var(--media-preview-max-width);
   }
 
   &:has(.media-preview__thumbnail[data-loading]) {