How To

JavaScript Picture-in-Picture API (PiP In JS)

Written by Bikash · 1 min read >

The JavaScript Picture-in-Picture (PiP) API is a browser API that allows users to view a video in a small floating window (also known as a “picture-in-picture” window).

At the same time, they continue to interact with the webpage or application.

This can be useful for video conferencing, watching video content while multitasking, or enabling users to watch a video while using other apps or features on their devices.

Demo Video

JavaScript Picture-in-Picture

Check If Browser Supports PiP API

To use the PiP API, you must first check if the current browser supports it. You can do this by checking if the PictureInPictureWindow object is available:

Implementation of JS PiP API

Once you have determined that the PiP API is supported, you can use the requestPictureInPicture() method to enter picture-in-picture mode for a video element:

To exit picture-in-picture mode, you can use the exitPictureInPicture() method:

You can also use the pictureInPictureElement property of the document object to check if a video element is currently in picture-in-picture mode:

Live Example of JavaScript Picture-in-Picture Mode

See the Pen Live Example of JavaScript Picture-in-Picture Mode by Bikash Panda (@phpcodertech) on CodePen.

For more information and a complete list of methods and properties available in the PiP API, you can refer to the MDN documentation and the Web Platform API Reference.

To use the PiP API, you will need to ensure that your browser supports it. Currently, the PiP API is supported by the following browsers:

  • Chrome 70 or later
  • Firefox 71 or later
  • Safari 14 or later
  • Microsoft Edge 85 or later

Also, Read:

Was this article helpful?
Written by Bikash
My name is Bikash Kr. Panda. I own and operate PHPCODER.TECH. I am a web Programmer by profession and working on more than 50 projects to date. Currently I am working on the web-based project and all the CMS and frameworks which are based on PHP. Profile

One Reply to “JavaScript Picture-in-Picture API (PiP In JS)”

Leave a Reply

Your email address will not be published. Required fields are marked *