Investigate Picture-in-Picture mode

HTML5 has a picture-in-picture mode for video playback, where you can pop out the video and it stays on top.

https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API

It would be great if we could use this instead of rolling our own popout option.

Unsolved problems for now:

• When we embed YouTube videos, we don't have control over the PIP window (and can't add 'next chapter' and 'previous chapter' buttons for example).
• Feature differences in Firefox and Chrome
• We need to detect when PIP mode is activated, so we can hide the sidebar or the video, otherwise we have a black rectange on screen.

The new "document picture in picture API" seems to be really cool, but unfortunately it is only supported in Blink based browsers (like Chrome) for now. Maybe we can rewrite the PopupWindow component to use this if possible?

See also https://developer.chrome.com/blog/spotify-picture-in-picture?hl=de