vendredi 27 février 2015

requestFullscreen for multiple elements

So imagine that you're using an HTML5 video player library such as Videojs. You want to extend this library's functionality by adding an extra button, but for reasons not relevant to this question, you don't want to get into that whole plugin coding business, so you just stick the player inside a container and add an absolutely positioned button, such as:



<div class="player-container">
<video class="video-js"></video>
<button type="button" class="absolutely-positioned"></button>
</div>


The problem is that at some point you might click on the fullscreen button of the player and this will call requestFullscreen on the video element and the video element only. This means that your button or anything else on that container won't be on fullscreen mode.


On webkit browsers you can make the other elements remain visible on fullscreen by setting a z-index equal or higher to that of the video element on fullscreen mode. On Firefox the element needs to be changed to position: fixed (but you can't use the -moz-full-screen prefix to style it, because the element is not recognized as being on fullscreen mode) and on IE it's simply not visible.


I'm trying to find out whether fullscreen mode is restricted to a single element (and it's children) or if it's possible to have multiple fullscreen elements at once. Has anyone else struggled with something similar? Are there any workarounds?


Aucun commentaire:

Enregistrer un commentaire