demo · v131

Music player with copied styles

The use case the WG kept coming back to: a web music player that pops out a now-playing window with the same custom styling as the host site. The page also registers MediaSession play, pause, next, and previous handlers so OS media controls hit the same player state.

Tracks of My Tears
Smokey Robinson & The Miracles

MediaSession handlers

Checking MediaSession support.

No MediaSession action has fired yet.

copyStyleSheets: false

previous default

The PiP window opens blank. Authors have to inline a <style> tag, fetch the host page's CSS over the network, or duplicate the design tokens.

copyStyleSheets: true (131)

shipped behaviour

The PiP window inherits every <link rel="stylesheet"> and <style> on the host page. A cloned widget renders identically out of the box.

the api

const win = await documentPictureInPicture.requestWindow({
  width: 360,
  height: 200,
  copyStyleSheets: true   // <-- the v131 option
});

win.document.body.appendChild(playerNode);  // already styled
navigator.mediaSession.setActionHandler("play", () => play());
navigator.mediaSession.setActionHandler("pause", () => pause());
navigator.mediaSession.setActionHandler("nexttrack", () => nextTrack());
navigator.mediaSession.setActionHandler("previoustrack", () => previousTrack());

see also