W3cubDocs

/Web APIs

HTMLVideoElement: enterpictureinpicture event

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.

js

addEventListener("enterpictureinpicture", (event) => {});

onenterpictureinpicture = (event) => {};

Event type

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():

js

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:

js

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

Browser compatibility

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

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/enterpictureinpicture_event