Limited availability
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The requestWindow()
method of the DocumentPictureInPicture
interface opens the Picture-in-Picture window for the current main browsing context. It returns a Promise
that fulfills with a Window
instance representing the browsing context inside the Picture-in-Picture window.
The requestWindow()
method requires transient activation, i.e., it must be invoked in response to a user action such as a mouse click or button press.
requestWindow()
requestWindow(options)
Parameters
options
Optional
An options object containing the following properties:
disallowReturnToOpener
Optional
A boolean value. When set to true
, this option hints to the browser that it should not display a UI control that enables the user to return to the originating tab and close the Picture-in-Picture window. Defaults to false
.
For example, in Chrome's implementation of this feature, the provided UI control is a "back to tab" button in the Picture-in-Picture window's top bar:
height
Optional
A non-negative number representing the height to set for the Picture-in-Picture window's viewport, in pixels. Defaults to 0
.
preferInitialWindowPlacement
Optional
A boolean value, which defaults to false
. When set to true
, it causes the Picture-in-Picture window to always appear back at the position and size it initially opened at, when it is closed and then reopened. By contrast, if preferInitialWindowPlacement
is false
the Picture-in-Picture window's size and position will be remembered when closed and reopened â it will reopen at its previous position and size, for example as set by the user.
width
Optional
A non-negative number representing the width to set for the Picture-in-Picture window's viewport, in pixels. Defaults to 0
.
Note: If one of height
or width
is specified, the other one must be too, otherwise an error is thrown. If both values are not specified, specified as 0, or set too large, the browser will clamp or ignore the values as appropriate to provide a reasonable user experience. The clamped size will vary depending on implementation, display size, and other factors.
A Promise
that fulfills with a Window
object instance representing the browsing context inside the Picture-in-Picture window.
NotSupportedError
DOMException
Thrown if the API has been explicitly disabled (for example via browser settings).
NotAllowedError
DOMException
Thrown if:
requestWindow()
is not called from a top-level window
object.requestWindow()
is called from the window
object of the Picture-in-Picture window (i.e., DocumentPictureInPicture.window
).requestWindow()
is called without transient activation.RangeError
DOMException
Thrown if only one of height
and width
are set, or if height
and width
are set with negative values.
const videoPlayer = document.getElementById("player");
// â¦
// Open a Picture-in-Picture window with all options set
const pipWindow = await window.documentPictureInPicture.requestWindow({
width: videoPlayer.clientWidth,
height: videoPlayer.clientHeight,
disallowReturnToOpener: true,
preferInitialWindowPlacement: true,
});
// â¦
Specifications Browser compatibility See also
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4