HTMLVideoElement: leavepictureinpicture event

The leavepictureinpicture event is fired when the HTMLVideoElement leaves picture-in-picture mode successfully.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("leavepictureinpicture", (event) => { })

onleavepictureinpicture = (event) => { }

Event type

A PictureInPictureEvent. Inherits from Event.

Examples

These examples add an event listener for the HTMLVideoElement’s leavepictureinpicture event, then post a message when that event handler has reacted to the event firing.

Using addEventListener():

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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.addEventListener("leavepictureinpicture", onExitPip);

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};

Using the onleavepictureinpicture event handler property:

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

function onExitPip() {
  console.log("Picture-in-Picture mode deactivated!");
}

video.onleavepictureinpicture = onExitPip;

button.onclick = () => {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  }
};

Specifications

Browser compatibility

See also

• HTMLVideoElement
• Picture-in-Picture API