diff --git a/site/en/docs/web-platform/document-picture-in-picture/index.md b/site/en/docs/web-platform/document-picture-in-picture/index.md index 31da6ae1544a..29c629305169 100644 --- a/site/en/docs/web-platform/document-picture-in-picture/index.md +++ b/site/en/docs/web-platform/document-picture-in-picture/index.md @@ -6,7 +6,7 @@ description: > authors: - beaufortfrancois date: 2023-02-02 -updated: 2023-06-01 +updated: 2023-06-09 hero: image/vvhSqZboQoZZN9wBvoXq72wzGAf1/l8xW8V85N60e4dmwUwmE.jpg alt: Person holding outdoor lounge chairs. tags: @@ -86,10 +86,6 @@ Research has shown that users need more ways to be productive on the web. Docume `height` : Sets the initial height of the Picture-in-Picture window. - `copyStyleSheets` - : When `true`, the CSS style sheets of the originated window are copied and applied to the Picture-in-Picture window. This is a one-time copy. - The default value is `false`. - ### Events `documentPictureInPicture.onenter` @@ -146,23 +142,45 @@ pipButton.addEventListener("click", async () => { ### Copy style sheets to the Picture-in-Picture window -To copy the CSS style sheets from the originating window set the `copyStyleSheets` option of `documentPictureInPicture.requestWindow()` to `true`. Note that this is a one-time copy. +To copy all CSS style sheets from the originating window, loop through [`styleSheets`](https://developer.mozilla.org/docs/Web/API/Document/styleSheets) explicitly linked into or embedded in the document and append them to the Picture-in-Picture window. Note that this is a one-time copy. ```js pipButton.addEventListener("click", async () => { const player = document.querySelector("#player"); - // Open a Picture-in-Picture window with style sheets copied over - // from the initial document so that the player looks the same. - const pipWindow = await documentPictureInPicture.requestWindow({ - copyStyleSheets: true, - }); + // Open a Picture-in-Picture window. + const pipWindow = await documentPictureInPicture.requestWindow(); + + // Copy style sheets over from the initial document + // so that the player looks the same. + const allCSS = [...document.styleSheets] + .map((styleSheet) => { + try { + return [...styleSheet.cssRules].map((r) => r.cssText).join(""); + } catch (e) { + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.type = styleSheet.type; + link.media = styleSheet.media; + link.href = styleSheet.href; + pipWindow.document.head.appendChild(link); + } + }) + .filter(Boolean) + .join("\n"); + const style = document.createElement("style"); + style.textContent = allCSS; + pipWindow.document.head.appendChild(style); // Move the player to the Picture-in-Picture window. pipWindow.document.body.append(player); }); ``` +{% Aside %} +The `copyStyleSheets` option was supported in a previous version of the specification. It is [not the case anymore](https://github.com/WICG/document-picture-in-picture/pull/79). +{% endAside %} + ### Handle when the Picture-in-Picture window closes Listen to the window `"unload"` event to know when the Picture-in-Picture window gets closed (either because the website initiated it or the user manually closed it). The event handler is a good place to get the elements back out of the Picture-in-Picture window as shown below.