From a9ad8ed3c0aecf58d49f1bc6ce51a3634334b763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Thu, 11 May 2023 10:49:58 +0200 Subject: [PATCH 1/2] Remove initialAspectRatio --- .../document-picture-in-picture/index.md | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) 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 8d8922190d96..09faa8dee8e4 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-02-22 +updated: 2023-05-11 hero: image/vvhSqZboQoZZN9wBvoXq72wzGAf1/l8xW8V85N60e4dmwUwmE.jpg alt: Person holding outdoor lounge chairs. tags: @@ -81,9 +81,6 @@ Research has shown that users need more ways to be productive on the web. Docume The promise rejects if it's called without a user gesture. The `options` dictionary contains the optional following members: - `initialAspectRatio` - : Sets the initial aspect ratio of the Picture-in-Picture window. - `width` : Sets the initial width of the Picture-in-Picture window. @@ -130,16 +127,17 @@ pipButton.addEventListener('click', async () => { ### Set the size of the Picture-in-Picture window -To set an aspect ratio, set the `initialAspectRatio` option of `documentPictureInPicture.requestWindow()` to the desired Picture-in-Picture window aspect ratio. +To set the size of the Pictire-in-Picture window, set the `width` and `height` options of `documentPictureInPicture.requestWindow()` to the desired Picture-in-Picture window size. Chrome may clamp those options values if they are too large or too small to fit a user-friendly window size. ```js pipButton.addEventListener("click", async () => { const player = document.querySelector("#player"); - // Open a Picture-in-Picture window whose aspect ratio is + // Open a Picture-in-Picture window whose size is // the same as the player's. const pipWindow = await documentPictureInPicture.requestWindow({ - initialAspectRatio: player.clientWidth / player.clientHeight, + width: player.clientWidth, + height: player.clientHeight, }); // Move the player to the Picture-in-Picture window. @@ -147,16 +145,6 @@ pipButton.addEventListener("click", async () => { }); ``` -The `width` and `height` options can also be used to set the desired Picture-in-Picture window size. Chrome may clamp those options values if they are too large or too small to fit a user-friendly window size. - -```js -// Set player's width and height as the Picture-in-Picture window size. -const pipWindow = await documentPictureInPicture.requestWindow({ - width: player.clientWidth, - height: player.clientHeight, -}); -``` - ### 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. From 7847b59c9f470707a4067e035a50119d61e5c9a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Thu, 11 May 2023 11:14:28 +0200 Subject: [PATCH 2/2] Update site/en/docs/web-platform/document-picture-in-picture/index.md Co-authored-by: Rachel Andrew --- site/en/docs/web-platform/document-picture-in-picture/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 09faa8dee8e4..508a2c1ad8ba 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 @@ -127,7 +127,7 @@ pipButton.addEventListener('click', async () => { ### Set the size of the Picture-in-Picture window -To set the size of the Pictire-in-Picture window, set the `width` and `height` options of `documentPictureInPicture.requestWindow()` to the desired Picture-in-Picture window size. Chrome may clamp those options values if they are too large or too small to fit a user-friendly window size. +To set the size of the Picture-in-Picture window, set the `width` and `height` options of `documentPictureInPicture.requestWindow()` to the desired Picture-in-Picture window size. Chrome may clamp the option values if they are too large or too small to fit a user-friendly window size. ```js pipButton.addEventListener("click", async () => {