@Gargron in HTML you can just reappend same media element where you want and it will preserve it's state. Not sure if this is possible in React. And this does not work with iframes.

I guess for React you can play media in a portal and when status is visible, position: absolute it to status frame, and when status is not visible, change it to fixed element.

Another approach could be to manually restore state when media gets pinned, but again, it's impossible for iframes, and is heavy operation.