Youtube iframe picture-in-picture mode

Question

I'd like to use JavaScript to enable PiP on Youtube videos. I am able to do so on html <video>s but it seems impossible to do so on Youtube <iframe>s. Has someone any lead on this?

Answer 1

Users may be able to right click twice (to bring up the html5 menu) and select Picture in Picture, but it seems to be impossible to trigger it programmatically from outside the iframe due to the same origin policy for iframes. I don't imagine that the &origin= parameter in the iframe URL actually changes the headers sent from youtube, it didn't seem to work in my testing. SecurityError: Blocked a frame with origin from accessing a cross-origin frame

The youtube iframe api gets around this by using postMessage, however there are no messages implemented at the moment to execute video.requestPictureInPicture(). There seems to be a togglePictureInPicture function defined inside the player base.js script but this doesn't seem to be exposed through the message passing API

Answer 2

I always use the next line in the console, on the youtube page:

document.getElementsByTagName('video');

This will show a HTML Collection, open it and right click on the first position of the collection, store it as global variable, this will generate something like temp1. Then you have to write the next line:

temp1.requestPictureInPicture();

And that's it.