W3cubDocs

/Web APIs

HTMLVideoElement: enterpictureinpicture event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The enterpictureinpicture event is fired when the HTMLVideoElement enters 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("enterpictureinpicture", (event) => { })

onenterpictureinpicture = (event) => { }

Event type

A PictureInPictureEvent. Inherits from Event.

Event properties

This interface also inherits properties from its parent Event.

Examples

These examples add an event listener for the HTMLVideoElement's enterpictureinpicture 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 onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.addEventListener("enterpictureinpicture", onEnterPip, false);

button.onclick = () => {
  video.requestPictureInPicture();
};

Using the onenterpictureinpicture event handler property:

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

function onEnterPip() {
  console.log("Picture-in-Picture mode activated!");
}

video.onenterpictureinpicture = onEnterPip;

button.onclick = () => {
  video.requestPictureInPicture();
};

Specifications

Specification
Picture-in-Picture> # eventdef-htmlvideoelement-enterpictureinpicture>
Picture-in-Picture> # dom-htmlvideoelement-onenterpictureinpicture>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`enterpictureinpicture_event`	69	79	No	56	13.1	105	No	72	13.4	20.0	No	13.4