# The Document Picture-in-Picture API and Implementing Picture-in-Picture for Any Element

# The Document Picture-in-Picture API and Implementing Picture-in-Picture for Any Element by zhangxinxu, from https://www.zhangxinxu.com/wordpress/?p=12447 ## 1. Revisiting the Old to Discover the New I wrote about implementing picture-in-picture back in 2018. Wow, that was alre...

Code: Dispatching a CustomEvent

const event = new CustomEvent('show', {
  detail: { message: payload, sentAt: new Date().toLocaleTimeString() }
});

window.dispatchEvent(event);

Code: Listening for the Event Payload

window.addEventListener('show', (event) => {
  render(event.detail.message, event.detail.sentAt);
});