HTMLVideoElement: enterpictureinpicture event

The enterpictureinpicture event is fired when the HTMLVideoElement enters picture-in-picture mode successfully.

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 = function() => {
  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 = function() => {
  video.requestPictureInPicture();
}

Specifications

Browser compatibility

No compatibility data found. Please contribute data for "api.HTMLVideoElement.enterpictureinpicture_event" (depth: 1) to the MDN compatibility data repository.

See Also

• HTMLVideoElement
• Picture-in-Picture_API