Original task title: Attempting to play a video when fullscreen mode is previously enabled on an element nested below the <body> element will cause the video to be played but not being visible
How to reproduce:
Go to https://commons.wikimedia.org/wiki/Commons:Picture_of_the_Year/2014/R2/Gallery, press "Full screen" (this requires you are running a browser with HTML5 fullscreen support), click a video.
And technically?
Call `requestFullscreen()` on any element that is nested below the body in the document element tree.
What happens:
A dialogue is opened but one can't see it (only after closing fullscreen) and the video is played (you will hear the sound in supported browsers).
And technically?
The newly opened dialogue (this is a child of the `<body>` element) is not a descendant of the element `requestFullscreen()` was called on so it's not visible to the end user.
What's expected behaviour:
Seeing the video playing.
- TimedMediaHandler could check whether the browser is currently in full screen mode and
- exit fullscreen mode if the full screen element is different from the required one
- add the dialogue element to the element that is currently in fullscreen mode instead
- make the video/ video player the fullscreen element instead
Note: I am using a similar approach for the slideshow button that is next to the fullscreen button. It checks which element is the fullscreen one and if it's not the required one, it will exit fullscreen and enter it with the required element. Maybe the exit step could be omitted (to be tested).
(assigning to myself as I'd possibly interested in fixing it but dear reader, please do not hesitate to grab it)