Preserve picture-in-picture when navigating the site

[loomchild]

Different across browsers. Currently destroying with key. Maybe in some absolute element or custom player that allows that.

[loomchild]

E.g. try:

• https://plyr.io/, https://github.com/sampotts/plyr (connectable with youtube, also supporta HLS)
• https://videojs.com (offers HLS, not sure if can be detached)

[loomchild]

Idea:

• Always absolute player component, interaction via store, positioned in right place or even teleport.
• Hide the player and stop it when navigating out, but not picture-in-picture.

[loomchild]

Not sure what benefit of player over native element. https://github.com/sampotts/plyr Vue wrapper: https://github.com/redxtech/vue-plyr Enable HLS like this: https://codepen.io/pen?template=oyLKQb Test stream: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

[loomchild]

Done. Maybe further investigate to use native PiP in Chrome or wait for better browser support.