ts-video-player 0.1.8 → 0.1.10

package/dist/{chunk-hvjcmbfn.js → chunk-cay3ahqr.js}

@@ -16,7 +16,7 @@ import {
   detectPipAvailability2,
   enterPiP2,
   exitPiP2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 
 // src/core/media-session.ts
 function isMediaSessionSupported2() {
@@ -148,6 +148,8 @@ class BaseProvider2 {
   }
   destroy() {
     this._ready = false;
+    this.stopEmbedFullscreen?.();
+    this.stopEmbedFullscreen = null;
     this.cleanup();
     this.events.removeAllListeners();
   }
@@ -167,6 +169,25 @@ class BaseProvider2 {
     return [];
   }
   setAudioTrack(_trackId) {}
+  stopEmbedFullscreen = null;
+  announceEmbedFeatures() {
+    if (typeof document === "undefined" || typeof HTMLMediaElement === "undefined")
+      return;
+    const fullscreenAvailability = this.getFeatureAvailability("fullscreen");
+    const pipAvailability = this.getFeatureAvailability("pip");
+    const volumeAvailability = this.getFeatureAvailability("volume");
+    this.events.emit("statechange", {
+      canFullscreen: fullscreenAvailability === "available",
+      canPictureInPicture: pipAvailability === "available",
+      fullscreenAvailability,
+      pipAvailability,
+      volumeAvailability
+    });
+    this.events.emit("availabilitychange", "fullscreen", fullscreenAvailability);
+    this.events.emit("availabilitychange", "pip", pipAvailability);
+    this.events.emit("availabilitychange", "volume", volumeAvailability);
+    this.stopEmbedFullscreen ??= onFullscreenChange2((fullscreen) => this.events.emit("fullscreenchange", fullscreen));
+  }
   getFeatureAvailability(feature) {
     const el = this.mediaElement;
     const media = el instanceof HTMLMediaElement ? el : null;
@@ -267,6 +288,8 @@ class HTML5Provider2 extends BaseProvider2 {
     this.isAudio = this.options.mediaType === "audio";
     this.media = document.createElement(this.isAudio ? "audio" : "video");
     this.media.className = "ts-video-player__media";
+    if (!this.isAudio)
+      this.media.style.cssText = "display:block;width:100%;height:100%;object-fit:contain;background:#000";
     if (this.options.autoplay)
       this.media.autoplay = true;
     if (this.options.loop)
@@ -715,6 +738,7 @@ class YouTubeProvider2 extends BaseProvider2 {
     }, 250);
     this.events.emit("loadedmetadata");
     this.events.emit("canplay");
+    this.announceEmbedFeatures();
     if (this.pendingVideoId) {
       const videoId = this.pendingVideoId;
       this.pendingVideoId = null;
@@ -1066,10 +1090,9 @@ class VimeoProvider2 extends BaseProvider2 {
     this.events.emit("statechange", {
       videoWidth: width,
       videoHeight: height,
-      aspectRatio: width / height || 16 / 9,
-      canFullscreen: true,
-      canPictureInPicture: false
+      aspectRatio: width / height || 16 / 9
     });
+    this.announceEmbedFeatures();
   }
   attachVimeoEvents() {
     if (!this.player)
@@ -1279,6 +1302,7 @@ class HLSProvider2 extends BaseProvider2 {
     }
     this.video = document.createElement("video");
     this.video.className = "ts-video-player__media";
+    this.video.style.cssText = "display:block;width:100%;height:100%;object-fit:contain;background:#000";
     if (this.options.autoplay)
       this.video.autoplay = true;
     if (this.options.loop)
@@ -2848,6 +2872,8 @@ class Player2 {
       toggleCaptions: () => this.toggleCaptions(),
       seekBackward: () => this.seekBy(-5),
       seekForward: () => this.seekBy(5),
+      seekBackwardLong: () => this.seekBy(-10),
+      seekForwardLong: () => this.seekBy(10),
       volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
       volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
       speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
@@ -3088,7 +3114,7 @@ class Player2 {
       this.announce(label(this._el, "playing"));
     });
     provider.on("pause", () => {
-      this._store.set("paused", true);
+      this._store.batch({ paused: true, playing: false, playbackState: "paused" });
       this._events.emit("pause");
       this.announce(label(this._el, "paused"));
     });
@@ -3239,7 +3265,8 @@ class Player2 {
     if (this.state.pictureInPicture) {
       await this.exitPiP();
     }
-    await this._provider?.enterFullscreen();
+    const media = this._provider?.mediaElement;
+    await enterFullscreen2(this._el, media instanceof HTMLMediaElement ? media : null);
     if (this._options.fullscreenOrientationLock !== false) {
       lockOrientation2("landscape");
     }
@@ -3357,7 +3384,7 @@ class VideoPlayerElement2 extends HTMLElementBase {
     this._disconnectId++;
     if (this._player)
       return;
-    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open", delegatesFocus: true });
     this._container = document.createElement("div");
     this._container.setAttribute("part", "container");
     this._container.style.cssText = "position:relative;width:100%;height:100%;";
@@ -3643,6 +3670,8 @@ class MediaPlayButton2 extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "play")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3704,6 +3733,8 @@ class MediaMuteButton2 extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "mute")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3753,6 +3784,8 @@ class MediaFullscreenButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "enterFullscreen")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3808,6 +3841,8 @@ class MediaPipButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "enterPiP")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -4068,6 +4103,8 @@ class MediaProgressBar2 extends HTMLElementBase {
             border-top-color: rgba(0,0,0,0.85);
           }
           .container:hover .tooltip { opacity: 1; }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
@@ -4216,6 +4253,8 @@ class MediaVolumeSlider2 extends HTMLElementBase {
             transition: transform 0.1s;
           }
           .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
@@ -4412,6 +4451,8 @@ class MediaSettingsMenu2 extends HTMLElementBase {
           .item[aria-checked="true"]::before { content: '\\2713'; }
           .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button class="trigger" part="trigger" type="button"
                 aria-label="${label(this, "settings")}" aria-haspopup="true" aria-expanded="false">
@@ -4641,6 +4682,8 @@ class MediaSeekButton2 extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
           button:disabled { cursor: default; opacity: .45; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button"></button>
       `;
@@ -4686,6 +4729,8 @@ class MediaPlaybackRateButton2 extends HTMLElementBase {
           button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "speed")}"></button>
       `;
@@ -4736,6 +4781,8 @@ class MediaAirplayButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "airPlayPlay")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>
@@ -4795,6 +4842,8 @@ class MediaLiveButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "seekToLive")}"><i aria-hidden="true"></i><span>${label(this, "live")}</span></button>
       `;
@@ -4891,6 +4940,8 @@ class MediaRemotePlaybackButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "remotePlayback")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>

package/dist/{chunk-ds1nj487.js → chunk-ndbfytd6.js}

@@ -8,7 +8,7 @@ import {
   probeVolumeAvailability2,
   detectFullscreenAvailability2,
   detectPipAvailability2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 
 // src/features/playback.ts
 var playback2 = {

package/dist/{chunk-rhykj0qy.js → chunk-pvq6e7gz.js}

@@ -383,7 +383,9 @@ class MediaEventsNormalizer2 {
 }
 function onFullscreenChange2(handler) {
   const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
-  const listener = () => {
+  const listener = (event) => {
+    if (event && typeof CustomEvent !== "undefined" && event instanceof CustomEvent)
+      return;
     const fullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
     handler(fullscreen);
   };
@@ -411,8 +413,8 @@ var DEFAULT_KEYBOARD_SHORTCUTS2 = {
   c: "toggleCaptions",
   ArrowLeft: "seekBackward",
   ArrowRight: "seekForward",
-  j: "seekBackward",
-  l: "seekForward",
+  j: "seekBackwardLong",
+  l: "seekForwardLong",
   ArrowUp: "volumeUp",
   ArrowDown: "volumeDown",
   ">": "speedUp",
@@ -463,6 +465,18 @@ function createKeyboardHandler2(actions, options = {}) {
       case "seekForward":
         actions.seekForward();
         break;
+      case "seekBackwardLong":
+        if (actions.seekBackwardLong)
+          actions.seekBackwardLong();
+        else
+          actions.seekBackward();
+        break;
+      case "seekForwardLong":
+        if (actions.seekForwardLong)
+          actions.seekForwardLong();
+        else
+          actions.seekForward();
+        break;
       case "volumeUp":
         actions.volumeUp();
         break;

package/dist/core/events.d.ts

@@ -78,6 +78,9 @@ export interface KeyboardActions {
     toggleCaptions(): void;
     seekBackward(): void;
     seekForward(): void;
+    /** J and L: ten seconds, as YouTube's keys go (the arrows are five). Falls back to seekBackward/seekForward. */
+    seekBackwardLong?(): void;
+    seekForwardLong?(): void;
     volumeUp(): void;
     volumeDown(): void;
     speedUp(): void;

package/dist/elements/index.js

@@ -23,7 +23,7 @@ import {
   MediaErrorDisplay2,
   MediaRemotePlaybackButton2,
   registerElements2
-} from "../chunk-hvjcmbfn.js";
+} from "../chunk-cay3ahqr.js";
 export {
   MediaAirplayButton2 as MediaAirplayButton,
   MediaErrorDisplay2 as MediaErrorDisplay,

package/dist/features/index.js

@@ -11,7 +11,7 @@ import {
   videoFeatures2,
   audioFeatures2,
   minimalFeatures2
-} from "../chunk-ds1nj487.js";
+} from "../chunk-ndbfytd6.js";
 export {
   audioFeatures2 as audioFeatures,
   captions2 as captions,

package/dist/index.js

@@ -63,7 +63,7 @@ import {
   applyPosition2,
   MediaSettingsMenu2,
   registerElements2
-} from "./chunk-hvjcmbfn.js";
+} from "./chunk-cay3ahqr.js";
 import {
   playback2,
   volume2,
@@ -77,7 +77,7 @@ import {
   videoFeatures2,
   audioFeatures2,
   minimalFeatures2
-} from "./chunk-ds1nj487.js";
+} from "./chunk-ndbfytd6.js";
 import {
   shallowEqual2,
   createSignal2,
@@ -118,7 +118,7 @@ import {
   enterPiP2,
   exitPiP2,
   detectAllFeatures2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 // src/core/audio-gain.ts
 class AudioGain {
   media;

package/dist/providers/base.d.ts

@@ -43,6 +43,18 @@ export declare abstract class BaseProvider implements Provider {
     setTextTrackMode(_trackId: string, _mode: 'disabled' | 'hidden' | 'showing'): void;
     getAudioTracks(): AudioTrack[];
     setAudioTrack(_trackId: string): void;
+    private stopEmbedFullscreen;
+    /**
+     * What an embedded player (YouTube, Vimeo) can do, said once it is ready.
+     *
+     * The native-media providers say it on loadedmetadata; the embeds said
+     * nothing, so fullscreen stayed "unavailable" and its button disabled,
+     * though the player can fill the screen like any other. Fullscreen is the
+     * container's own (the player's controls come along); picture in picture
+     * is the embed's business. Also follows the document into and out of
+     * fullscreen, which only the native providers did.
+     */
+    protected announceEmbedFeatures(): void;
     getFeatureAvailability(feature: 'volume' | 'fullscreen' | 'pip'): FeatureAvailability;
     enterFullscreen(): Promise<void>;
     exitFullscreen(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-video-player",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",

package/src/core/events.ts

@@ -208,7 +208,12 @@ export class MediaEventsNormalizer {
 export function onFullscreenChange(handler: (fullscreen: boolean) => void): () => void {
   const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
 
-  const listener = () => {
+  const listener = (event?: Event) => {
+    // The browser's own change only. <video-player> re-dispatches the player's
+    // events on itself, bubbling and composed, under the same names; its
+    // "fullscreenchange" reached this document listener, which announced it
+    // again, and the two fed each other until the stack overflowed.
+    if (event && typeof CustomEvent !== 'undefined' && event instanceof CustomEvent) return
     const fullscreen = !!(
       document.fullscreenElement ||
       (document as any).webkitFullscreenElement ||
@@ -261,8 +266,8 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: Record<string, string> = {
   c: 'toggleCaptions',
   ArrowLeft: 'seekBackward',
   ArrowRight: 'seekForward',
-  j: 'seekBackward',
-  l: 'seekForward',
+  j: 'seekBackwardLong',
+  l: 'seekForwardLong',
   ArrowUp: 'volumeUp',
   ArrowDown: 'volumeDown',
   '>': 'speedUp',
@@ -292,6 +297,9 @@ export interface KeyboardActions {
   toggleCaptions(): void
   seekBackward(): void
   seekForward(): void
+  /** J and L: ten seconds, as YouTube's keys go (the arrows are five). Falls back to seekBackward/seekForward. */
+  seekBackwardLong?(): void
+  seekForwardLong?(): void
   volumeUp(): void
   volumeDown(): void
   speedUp(): void
@@ -351,6 +359,14 @@ export function createKeyboardHandler(
       case 'seekForward':
         actions.seekForward()
         break
+      case 'seekBackwardLong':
+        if (actions.seekBackwardLong) actions.seekBackwardLong()
+        else actions.seekBackward()
+        break
+      case 'seekForwardLong':
+        if (actions.seekForwardLong) actions.seekForwardLong()
+        else actions.seekForward()
+        break
       case 'volumeUp':
         actions.volumeUp()
         break

package/src/elements/media-airplay-button.ts

@@ -27,6 +27,8 @@ export class MediaAirplayButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'airPlayPlay')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>

package/src/elements/media-fullscreen-button.ts

@@ -28,6 +28,8 @@ export class MediaFullscreenButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'enterFullscreen')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-live-button.ts

@@ -20,6 +20,8 @@ export class MediaLiveButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'seekToLive')}"><i aria-hidden="true"></i><span>${label(this, 'live')}</span></button>
       `

package/src/elements/media-mute-button.ts

@@ -33,6 +33,8 @@ export class MediaMuteButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'mute')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-pip-button.ts

@@ -27,6 +27,8 @@ export class MediaPipButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'enterPiP')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-play-button.ts

@@ -27,6 +27,8 @@ export class MediaPlayButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'play')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-playback-rate-button.ts

@@ -18,6 +18,8 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
           button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'speed')}"></button>
       `

package/src/elements/media-progress-bar.ts

@@ -65,6 +65,8 @@ export class MediaProgressBar extends HTMLElementBase {
             border-top-color: rgba(0,0,0,0.85);
           }
           .container:hover .tooltip { opacity: 1; }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"

package/src/elements/media-remote-playback-button.ts

@@ -32,6 +32,8 @@ export class MediaRemotePlaybackButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'remotePlayback')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>

package/src/elements/media-seek-button.ts

@@ -17,6 +17,8 @@ export class MediaSeekButton extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
           button:disabled { cursor: default; opacity: .45; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button"></button>
       `

package/src/elements/media-settings-menu.ts

@@ -54,6 +54,8 @@ export class MediaSettingsMenu extends HTMLElementBase {
           .item[aria-checked="true"]::before { content: '\\2713'; }
           .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button class="trigger" part="trigger" type="button"
                 aria-label="${say(this, 'settings')}" aria-haspopup="true" aria-expanded="false">

package/src/elements/media-volume-slider.ts

@@ -42,6 +42,8 @@ export class MediaVolumeSlider extends HTMLElementBase {
             transition: transform 0.1s;
           }
           .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"

package/src/elements/video-player.ts

@@ -31,7 +31,9 @@ export class VideoPlayerElement extends HTMLElementBase {
     if (this._player) return
 
     // Create shadow DOM
-    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+    // delegatesFocus: focusing <video-player> (a dialog's first focus, an
+    // `autofocus`) puts focus on the player itself, where its keys work.
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open', delegatesFocus: true })
 
     // Container
     this._container = document.createElement('div')

package/src/player.ts

@@ -22,6 +22,7 @@ import { createMediaSession, type MediaSessionOptions } from './core/media-sessi
 import { lockOrientation, unlockOrientation } from './core/orientation'
 import { defaultLoaders, findSourceCandidates } from './providers'
 import { embedCover } from './core/cover'
+import { enterFullscreen as enterFullscreenElement } from './core/features'
 import { label } from './elements/utils'
 
 // =============================================================================
@@ -263,6 +264,8 @@ export class Player implements IPlayer {
       toggleCaptions: () => this.toggleCaptions(),
       seekBackward: () => this.seekBy(-5),
       seekForward: () => this.seekBy(5),
+      seekBackwardLong: () => this.seekBy(-10),
+      seekForwardLong: () => this.seekBy(10),
       volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
       volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
       speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
@@ -599,7 +602,10 @@ export class Player implements IPlayer {
     })
 
     provider.on('pause', () => {
-      this._store.set('paused', true)
+      // Not playing any more either: the controls hide only while playing,
+      // and a paused player that still said `playing` hid them over a still
+      // frame, and told everyone reading state.playing it was still going.
+      this._store.batch({ paused: true, playing: false, playbackState: 'paused' })
       this._events.emit('pause')
       this.announce(label(this._el, 'paused'))
     })
@@ -794,7 +800,12 @@ export class Player implements IPlayer {
     if (this.state.pictureInPicture) {
       await this.exitPiP()
     }
-    await this._provider?.enterFullscreen()
+    // The whole player, controls included: the provider's own container holds
+    // only the media, so a fullscreen video had no controls to pause or seek
+    // with. A browser that can only take the <video> itself fullscreen (iOS
+    // Safari) still gets it, with the system's controls.
+    const media = this._provider?.mediaElement
+    await enterFullscreenElement(this._el, media instanceof HTMLMediaElement ? media : null)
     if (this._options.fullscreenOrientationLock !== false) {
       lockOrientation('landscape')
     }

package/src/providers/base.ts

@@ -18,7 +18,7 @@ import type {
   MediaError,
   FeatureAvailability,
 } from '../types'
-import { EventEmitter } from '../core/events'
+import { EventEmitter, onFullscreenChange } from '../core/events'
 import {
   detectVolumeAvailability,
   detectFullscreenAvailability,
@@ -63,6 +63,8 @@ export abstract class BaseProvider implements Provider {
 
   destroy(): void {
     this._ready = false
+    this.stopEmbedFullscreen?.()
+    this.stopEmbedFullscreen = null
     this.cleanup()
     this.events.removeAllListeners()
   }
@@ -132,6 +134,37 @@ export abstract class BaseProvider implements Provider {
 
   // === Feature Availability ===
 
+  private stopEmbedFullscreen: (() => void) | null = null
+
+  /**
+   * What an embedded player (YouTube, Vimeo) can do, said once it is ready.
+   *
+   * The native-media providers say it on loadedmetadata; the embeds said
+   * nothing, so fullscreen stayed "unavailable" and its button disabled,
+   * though the player can fill the screen like any other. Fullscreen is the
+   * container's own (the player's controls come along); picture in picture
+   * is the embed's business. Also follows the document into and out of
+   * fullscreen, which only the native providers did.
+   */
+  protected announceEmbedFeatures(): void {
+    // Nothing to measure without a page (server rendering, tests).
+    if (typeof document === 'undefined' || typeof HTMLMediaElement === 'undefined') return
+    const fullscreenAvailability = this.getFeatureAvailability('fullscreen')
+    const pipAvailability = this.getFeatureAvailability('pip')
+    const volumeAvailability = this.getFeatureAvailability('volume')
+    this.events.emit('statechange', {
+      canFullscreen: fullscreenAvailability === 'available',
+      canPictureInPicture: pipAvailability === 'available',
+      fullscreenAvailability,
+      pipAvailability,
+      volumeAvailability,
+    })
+    this.events.emit('availabilitychange', 'fullscreen', fullscreenAvailability)
+    this.events.emit('availabilitychange', 'pip', pipAvailability)
+    this.events.emit('availabilitychange', 'volume', volumeAvailability)
+    this.stopEmbedFullscreen ??= onFullscreenChange(fullscreen => this.events.emit('fullscreenchange', fullscreen))
+  }
+
   getFeatureAvailability(feature: 'volume' | 'fullscreen' | 'pip'): FeatureAvailability {
     // Only pass media element if it's actually an HTMLMediaElement (not an iframe)
     const el = this.mediaElement