Limited supportUse with care and provide a fallback when broad support matters.
Embedded Limited support

Picture-in-picture (video)

The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

EmbeddedMedia

Overview

The picture-in-picture API allow websites to create a floating, always-on-top video window. Also known as PiP or pop-out video. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:picture-in-picture
110
110
13.1
110
13.4
HTML attribute
disablepictureinpicture
69
79
122
13.1
105
13.4
DOM API
exitPictureInPicture

The exitPictureInPicture() method of the Document interface requests that a video contained in this document, which is currently floating, be taken out of picture-in-picture mode, restoring the previous state of the screen. This usually reverses the effects of a previous call to HTMLVideoElement.requestPictureInPicture().
69
79
13.1
105
13.4
pictureInPictureElement

The read-only pictureInPictureElement property of the Document interface returns the that is currently being presented in picture-in-picture mode in this document, or null if picture-in-picture mode is not currently in use.
69
79
13.1
105
13.4
pictureInPictureEnabled

The read-only pictureInPictureEnabled property of the Document interface indicates whether or not picture-in-picture mode is available.
69
79
13.1
105
13.4
disablePictureInPicture

The HTMLVideoElement disablePictureInPicture property reflects the HTML attribute indicating whether the picture-in-picture feature is disabled for the current element.
69
79
122
13.1
105
13.4
enterpictureinpicture_event

The enterpictureinpicture event is fired when the HTMLVideoElement enters picture-in-picture mode successfully.
69
79
13.1
105
13.4
leavepictureinpicture_event

The leavepictureinpicture event is fired when the HTMLVideoElement leaves picture-in-picture mode successfully.
69
79
13.1
105
13.4
requestPictureInPicture

The HTMLVideoElement method requestPictureInPicture() issues an asynchronous request to display the video in picture-in-picture mode.
69
79
13.1
105
13.4
PictureInPictureEvent

The PictureInPictureEvent interface represents picture-in-picture-related events, including HTMLVideoElement/enterpictureinpictureevent, HTMLVideoElement/leavepictureinpictureevent and PictureInPictureWindow/resize_event.
85
85
16
105
16
PictureInPictureEvent

The PictureInPictureEvent() constructor returns a new PictureInPictureEvent object.
85
85
16
105
16
pictureInPictureWindow

The read-only pictureInPictureWindow property of the PictureInPictureEvent interface returns the PictureInPictureWindow the event relates to.
69
79
13.1
105
13.4
PictureInPictureWindow

The PictureInPictureWindow interface represents an object able to programmatically obtain the width and height and resize event of the floating video window.
69
79
13.1
105
13.4
height

The read-only height property of the PictureInPictureWindow interface returns the height of the floating video window in pixels.
69
79
13.1
105
13.4
resize_event

The resize event fires when the floating video window has been resized.
69
79
13.1
105
13.4
width

The read-only width property of the PictureInPictureWindow interface returns the width of the floating video window in pixels.
69
79
13.1
105
13.4
pictureInPictureElement

The pictureInPictureElement read-only property of the ShadowRoot interface returns the Element that is currently being presented in picture-in-picture mode in this shadow tree, or null if picture-in-picture mode is not currently in use.
69
79
13.1
105
13.4
CSS at-rule
display-mode.picture-in-picture
Experimental

`picture-in-picture` value
123
123
Preview
Other
html.elements.iframe.allow.picture-in-picture
Experimental
69
79
105
http.headers.Permissions-Policy.picture-in-picture
Experimental

The HTTP Permissions-Policy header picture-in-picture directive controls whether the current document is allowed to play a video in a Picture-in-Picture API mode.
88
88
105
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • When this attribute is set, the overlay button to disable picture-in-picture (PiP) is hidden, but the user can still enable PiP.
Removed
  • This feature was removed in a later browser version (122)
Notes 4 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • When this property is set to `true`, the overlay button to disable picture-in-picture (PiP) is hidden, but the user can still enable PiP.
  • This property is undefined, but still has an effect if set to a value.
Removed
  • This feature was removed in a later browser version (122)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (85)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (69)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (85)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (13.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (13.4)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (85)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (69)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (85)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (13.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: EnterPictureInPictureEvent (13.4)

Syntax

JAVASCRIPT 
const video = document.querySelector('video');
// Start PiP mode
await video.requestPictureInPicture();
// End PiP mode
await document.exitPictureInPicture();

Use cases

  • Use Picture-in-picture (video)

    Use Picture-in-picture (video) when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Picture-in-picture (video) to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Picture-in-picture (video) in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Picture-in-picture (video) supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features