Fullscreen doesn't work iPad OS 15.7.7 with videojs 8.3.0

[djbloc]

Description

Using following html:

      <div>
          <div id="video_player_div" style="max-width: 720px; margin: 0 auto;">
        <video-js id="vid_player" class="vjs-fluid vjs-16-9 vjs-show-big-play-button-on-pause" style="width: 100%;">

        </video-js>
    </div>
          </div>

and default video controls and following options:

<script>
    var options = {
        controls: true,
        liveui: true,
        autoplay: false,
        controlBar: {
            skipButtons: {
              forward: 30,
              backward: 30
            },
            currentTimeDisplay: true
        },
        poster: "https://<redacted.jpg",
        sources: [{
            src: "https://<redacted>.m3u8"
        }]
    };
    var video_player = videojs('vid_player', options, function () {
        videojs.log("Your player is ready");

        this.bigPlayButton.one('click', function () {
           alert("Big play button has been clicked")
        });

        this.bigPlayButton.one('tap', function () {
           alert("Big play button has been tapped")
        });

</script>

Video inline playback is working correctly. However when you press fullscreen icon on controls, it seems to start fullscreen mode however video is blank (black screen), audio does continue, and the control bar is briefly shrunk to third of horitzonal size then disappears. There is a 'X' in top left to allow you to go back to inline. If you tap the screen however, no controls (default or native) appear.

Switched CSS/JS links to 7.21.4 (no other changes) and fullscreen works correctly.

    <!-- <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" /> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.min.css">

<!-- <script src="https://vjs.zencdn.net/8.3.0/video.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video.min.js"></script>

Reduced test case

Local development

Steps to reproduce

1. Use 8.3.0 on iPad with OS 15.7.7 (Latest version for iPad Mini 4)
2. Try playback in fullscreen
3. Note screen is blank and no controls available. Playback is continuing as audio continues
4. Switch to videojs release 7.21.4 and fullscreen works on above iPad

Errors

No response

What version of Video.js are you using?

8.3.0 release

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Safari

What OS(es) and version(s) does this occur with?

iPadOS 15.7.7 (Latest for iPad Mini 4)

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://.m3u8: say @video-archivist-bot save 4wGgOw

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[djbloc]

See related issue has been opened #8339 and subsequent fixed in #8346

Tested adding temporary workaround below to CSS fixes above:

.video-js.vjs-fullscreen {
  display: block;
}