Get html-element to overlay videojs player on iOS

Question

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>

misterben · Accepted Answer · 2024-12-16 14:20:07Z

0

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 });

answered Dec 16, 2024 at 14:20

misterben

7,9382 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get html-element to overlay videojs player on iOS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related