JavaScript Document exitPictureInPicture() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word EXITPICTUREINPICTURE

Definition

document.exitPictureInPicture() asks the browser to take the document’s floating Picture-in-Picture video out of PiP and restore it to the page. It usually reverses HTMLVideoElement.requestPictureInPicture().

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.exitPictureInPicture. Start with this line.

JavaScript
document.exitPictureInPicture()
CallWhat it does
document.exitPictureInPicture()Primary signature.
document.exitPictureInPicture(...)Call with the arguments your case needs.

Built into the browser. Call exitPictureInPicture(...) on document — no import required.

Library declarations
JavaScript
document.exitPictureInPicture()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Promise that resolves when exit finishes

JavaScript Examples

Example 1 — Exit Only When Active

Check pictureInPictureElement before calling exit (MDN-safe pattern).

JavaScript
async function leavePiP() {
  if (!document.pictureInPictureElement) {
    console.log("Not in Picture-in-Picture");
    return;
  }
  try {
    await document.exitPictureInPicture();
    console.log("Document Exited from Picture-in-Picture mode");
  } catch (err) {
    console.log("Exit failed:", err.name);
  }
}
Try It Yourself

How It Works

  1. Guard first. Skip the API when nothing is in PiP.
  2. Await exit. Wait until the browser restores the video to the page.
  3. Catch errors. Some environments still reject — handle them.
  4. UI tip. Also listen for leavepictureinpicture on the video.

Example 2 — InvalidStateError When Null

Calling exit with no PiP element rejects with InvalidStateError (MDN).

JavaScript
async function forceExit() {
  if (typeof document.exitPictureInPicture !== "function") {
    console.log("API unavailable");
    return;
  }
  try {
    // pictureInPictureElement is null on a normal page load
    await document.exitPictureInPicture();
  } catch (err) {
    console.log(err.name); // "InvalidStateError"
  }
}

forceExit();
Try It Yourself

How It Works

  1. No PiP video. Fresh pages have pictureInPictureElement === null.
  2. Call anyway. The method rejects instead of silently no-oping.
  3. Read err.name. MDN documents InvalidStateError.
  4. Fix. Guard with if (document.pictureInPictureElement) first.

Example 3 — Feature Detect

Limited availability means you should check before wiring PiP buttons.

JavaScript
const canExit = typeof document.exitPictureInPicture === "function";
const canEnter = typeof HTMLVideoElement !== "undefined" &&
  "requestPictureInPicture" in HTMLVideoElement.prototype;

console.log(canExit);
console.log(canEnter);
console.log(document.pictureInPictureEnabled);
console.log(document.pictureInPictureElement); // null unless a video is in PiP
Try It Yourself

How It Works

  1. Check exit. Missing function → hide the “Exit PiP” control.
  2. Check enter. Exit is useless without requestPictureInPicture.
  3. Read enabled. Policy may disable PiP even if methods exist.
  4. Read element. null means nothing is currently floating.
Compatibility

Browser Support

Document.exitPictureInPicture() is part of the Picture-in-Picture API. MDN marks it Limited availability (not Baseline). Feature-detect before production use.

✓ Limited availability

Document.exitPictureInPicture()

Supported in modern Chromium, Firefox, and Safari with varying policy rules. Always check document.exitPictureInPicture and pictureInPictureEnabled.

Limited Not Baseline
Google Chrome Modern versions
Yes
Microsoft Edge Modern versions
Yes
Mozilla Firefox Modern versions
Yes
Apple Safari Modern versions
Yes
Opera Modern versions
Yes
Internet Explorer Not supported
No
exitPictureInPicture() Feature-detect required

Bottom line: Safe when you detect support, guard null state, and handle Promise rejection. See the MDN exitPictureInPicture() reference.

Frequently Asked Questions

It requests that a video currently floating in picture-in-picture mode leave PiP and return to the page. It usually reverses HTMLVideoElement.requestPictureInPicture().
No. MDN does not mark Document.exitPictureInPicture() as Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline), so feature-detect in production.
A Promise that resolves when the browser has finished exiting picture-in-picture mode. On failure, handle the rejection with catch().
An InvalidStateError is thrown (promise rejects) if document.pictureInPictureElement is null. Always check pictureInPictureElement before calling exitPictureInPicture().
Call video.requestPictureInPicture() on an HTMLVideoElement, usually from a user gesture. Check document.pictureInPictureEnabled first.
Listen for enterpictureinpicture and leavepictureinpicture on the video, or compare document.pictureInPictureElement to your video element.

Next: exitPointerLock()

Learn how to release pointer lock with document.exitPointerLock().

exitPointerLock() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document exitFullscreen() Method JavaScript Document exitPointerLock() Method