How to use “picture in picture 📺” in javaScript.

picture-in-picture, the most awaited feature from chrome is finally here and this guide will tell you exactly how to use it in your javascript code.

note — picture-in-picture is only available in chrome so this thing is to need to keep in mind before writing your code.

Step 1 — Find all Video Tags on your page.

Step 2 — Call requestPictureInPicture on your video Element

Step 3 — handle Exit from picture-in-picture

Step 4 — Manually Exit from picture-in-picture

Check out the Demo Code.

Demo.

https://dolphin-92e8c.firebaseapp.com/