I am working on a site that uses videoJS for video and have created html elements that are being place on top of the video as a scoreboard. The issue is that the native iOS player overrides videojs when going to fullscreen.
Is there a way to make sure iOS native player accepts an html overlay?
<video class="videoPlayer" preload="none" style="display: none;" data-bind="attr: {'id': 'Player_' + ID}, VideoURL: $data" playsinline controls controlsList="nodownload"></video>
<div class="video-preroll" style="display: none;" data-bind="with: $root.currentPreRoll">
<div class="picture-container">
<img data-bind="pictureURLforimg: BillboardLandscapePicture" />
</div>
</div>
<div class="custom-overlay" style="display: none;" data-bind="visible: $root.replayOverlay().Show && $root.hideOverlay">
<div data-bind="with: $root.replayOverlay">
<div class="score-time"><div class="score-time-img" data-bind="backgroundPictureURL: HomeTeamLogoURL" /><span data-bind="text: HomeTeamName"></span> <div class="game-score" data-bind="text: $root.gameScore"></div> <span data-bind="text: AwayTeamName"></span><div class="score-time-img" data-bind="backgroundPictureURL: AwayTeamLogoURL" /></div>
</div>
<div class="game-time" data-bind="visible: $root.showClock"><span style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;" data-bind="text: $root.periodName"></span><span style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;" data-bind="text: $root.currentTime"></span></div>
</div>
You can't overlay anything on top of iPhone Safari's native fullscreen.
Video.js has a full window mode for a "fake" fullscreen that maximises the video within the browser. Not the same as real fullscreen but all you can do until Apple implements the proper fullscreen API, as it already has on iPad. You can enable it setup options:
videojs(elementOrId, { preferFullWindow: true });