Videojs requestPictureInPicture() works only once on scrolling to top and bottom

Question

I'm using Videojs Framework to show video on a page, but there is a problem with PictureInPicture functionality. I'm trying to go in PictureInPicture mode automatically when user scrolls down, and again when user scrolls up (back to the actual video player) exit the PictureInPicture mode.
The first time I scroll down and up it's all working, but any attempt after that fails.
Here's a pen to my code: https://codepen.io/madefortestonly/pen/GRJxMya?editors=1011
This is the error message I got from the catch block:

DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.
at Html5.requestPictureInPicture (https://vjs.zencdn.net/7.6.6/video.js:22669:23)
at Player.techGet_ (https://vjs.zencdn.net/7.6.6/video.js:26085:34)
at Player.requestPictureInPicture (https://vjs.zencdn.net/7.6.6/video.js:26787:21)
at Player.<anonymous> (pen.js:75:16)
at https://vjs.zencdn.net/7.6.6/video.js:4530:9

By the way, someone seemed to have exactly the same problem as I had in here:
Why video.requestPictureInPicture() works only once?
It looks like you need to click on the page for scroll to work for the next attempts because scroll is not part of the user-trusted events.
I tried to simulate a click with javascript on scrolling up but so far no luck.

How can I fix my code to automatically go PictureInPicture back and forth on scrolling without telling the user that he/she needs to click somewhere on the page?

Solution

You can't get around this, as you can't forge user interation. An alternative implementation, like reszing and repositioning the player within the page, might be a better option for your use case than the browser's native PinP.