JavaScript Document exitPictureInPicture() Method

What You’ll Learn

document.exitPictureInPicture() is an instance method that asks the browser to leave Picture-in-Picture mode (see MDN Document: exitPictureInPicture()). Learn its Promise return, the InvalidStateError when nothing is in PiP, how it pairs with HTMLVideoElement.requestPictureInPicture() and pictureInPictureElement, and five try-it labs.

Introduction

Picture-in-Picture (PiP) floats a video in a small window so users can keep watching while browsing other tabs or apps. You enter PiP with video.requestPictureInPicture(). To leave from script, call document.exitPictureInPicture().

MDN: this method requests that a video currently floating in PiP be taken out of that mode, restoring the previous screen state. It usually reverses a previous requestPictureInPicture() call.

Related tutorials: pictureInPictureElement, pictureInPictureEnabled, exitFullscreen().

Understanding document.exitPictureInPicture()

An instance method on the page’s document object (Picture-in-Picture API; MDN).

• Parameters — none (MDN).
• Return value — a Promise that resolves when exiting PiP finishes (MDN).
• Errors — if exiting fails, the promise rejects; handle with catch() (MDN).
• InvalidStateError — thrown when document.pictureInPictureElement is null (MDN).
• Pair — enter with HTMLVideoElement.requestPictureInPicture(); exit with this method.
• Tracking — listen for enterpictureinpicture / leavepictureinpicture on the video (MDN).

📝 Syntax

General form of Document.exitPictureInPicture (MDN):

exitPictureInPicture()

Parameters

None (MDN).

Return value

A Promise resolved once the user agent has finished exiting picture-in-picture mode. On failure, use the promise’s catch() handler (MDN).

Exceptions

• InvalidStateError — thrown if document.pictureInPictureElement is null (MDN).

MDN toggle example

document.onclick = (event) => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .then(() => console.log("Document Exited from Picture-in-Picture mode"))
      .catch((err) => console.error(err));
  } else {
    video.requestPictureInPicture();
  }
};

MDN: to track which video is in PiP, listen for enterpictureinpicture / leavepictureinpicture on the video, or compare document.pictureInPictureElement to your HTMLVideoElement.

⚖️ PiP vs fullscreen exit

Examples Gallery

Examples follow MDN Document: exitPictureInPicture() and practical PiP patterns. Entering PiP needs a real video and often a user gesture; support varies by browser.

const video = document.querySelector("#player");

document.onclick = () => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .then(() => console.log("Document Exited from Picture-in-Picture mode"))
      .catch((err) => console.error(err));
  } else {
    video.requestPictureInPicture();
  }
};

Document Exited from Picture-in-Picture mode
(after a click while PiP is active)

async function leavePiP() {
  if (!document.pictureInPictureElement) {
    console.log("not in picture-in-picture");
    return;
  }
  await document.exitPictureInPicture();
  console.log("exited PiP");
}

document.getElementById("exit").addEventListener("click", () => {
  leavePiP().catch((err) => console.error(err));
});

not in picture-in-picture
(or "exited PiP" after a successful leave)

function exitPictureInPictureSafe() {
  if (document.pictureInPictureElement) {
    return document.exitPictureInPicture();
  }
  return Promise.resolve("already windowed");
}

exitPictureInPictureSafe()
  .then((msg) => console.log(msg || "exit finished"))
  .catch((err) => console.error(err));

already windowed
(when no PiP is active)

const video = document.querySelector("#player");
const status = document.getElementById("status");

function updateStatus() {
  status.textContent = document.pictureInPictureElement
    ? "PiP: " + document.pictureInPictureElement.id
    : "not in PiP";
}

video.addEventListener("enterpictureinpicture", updateStatus);
video.addEventListener("leavepictureinpicture", updateStatus);
updateStatus();

document.getElementById("exit").addEventListener("click", () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture().catch(console.error);
  }
});

not in PiP
(or "PiP: player" while active)

const canExit = typeof document.exitPictureInPicture === "function";
const canEnter =
  typeof HTMLVideoElement !== "undefined" &&
  typeof HTMLVideoElement.prototype.requestPictureInPicture === "function";
const enabled = document.pictureInPictureEnabled === true;

console.log({ canExit, canEnter, enabled });

{ canExit: true, canEnter: true, enabled: true }
(values depend on browser / platform)

🚀 Common Use Cases

• Video players — Exit PiP button next to Enter PiP.
• Toggle controls — One button that enters or exits based on pictureInPictureElement.
• Route changes — Leave PiP before navigating away from a watch page.
• Single-video policy — Exit current PiP before opening another video in PiP.
• Analytics — Log when script-driven exit completes.
• Not a fullscreen replacement — PiP and fullscreen are separate presentation modes.

📝 Notes

• MDN: Limited availability (not Baseline) — feature-detect in production.
• MDN: no parameters; returns a Promise.
• MDN: InvalidStateError if pictureInPictureElement is null.
• Usually reverses HTMLVideoElement.requestPictureInPicture() (MDN).
• Users can also close PiP with browser / OS UI — keep event listeners.
• Related: pictureInPictureElement, pictureInPictureEnabled, exitFullscreen().

💡 Best Practices