Safari: fullscreen button is not working about video.js

[amtins]

@shastik I did a quick test on Browserstack with Safari 15.6 and I was able to reproduce the issue with video.js v8.x.x. I checked the diff between v7.21.4..v8.0.0, I came across this modification which seems to be the cause of this behavior.

This will require investigation to understand the intention behind the change. In the meantime, perhaps this workaround can help. Please note I haven't tested the side effects it could potentially have.

.video-js {
  display: block;
}

[mister-ben]

Sorry I misread that as 16.5.1. This would be a less impactful change, only affecting fullscreen.

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

FWIW display: block; was changed to display: inline-block; in 8 to more closely match browsers' display of <video> elements.

[djbloc]

Just to say this affects iPadOS 15.7.7 / iPad Mini 4 as well. Confirm the workaround fixes the issue.

[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.

[mister-ben]

I can't reporduce on the same verison of Safari, and haven't seen any other reports.

[shastik]

It can be reproduced also via browserstack.com. Just select Safari version 15.6 or lower and open URL with videojs 8.3 - https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0 and when video starts playing -> try to click on fullscreen mode.

On the newer version of Safari, it works correctly.

[shastik]

Thank you @mister-ben and @amtins . Your fix is working correctly.