Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Remove initialAspectRatio #6269

Merged
merged 2 commits into from
May 11, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 5 additions & 17 deletions site/en/docs/web-platform/document-picture-in-picture/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -130,33 +127,24 @@ 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.
beaufortfrancois marked this conversation as resolved.
Show resolved Hide resolved

```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.
pipWindow.document.body.append(player);
});
```

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.
Expand Down