[Player] full screen buggy in several browsers

[nitedog]

Issues:

1. In Chrome, the "Enter full screen" button doesn't work with the mouse.
2. In Firefox, the "Enter full screen" button works intermittently with the mouse -- it works if I click on it while the flashing "Enter full screen" message has flashed OFF.
3. In IE 11, the "Enter full screen" button works only if I double-click it.
4. For all the above browsers, if I do manage to trigger the "Enter full screen" button (either with the mouse or keyboard, the video image does not get any larger.

By the way, I'm using Windows 7.

[nitedog]

@terrill it appears that the "Enter full screen" bubble appears on top of the button, so that it can't be easily clicked in several browsers. Also the full screen issue happens on my end. Are these know issues?

[yatil]

Note that we might need to do an update to the player, we had used a in-development version. It works in the Able Player Demos, so that might be the culprit.

[yatil]

This might also be a source for the #254 issue. I was under the impression I had updated everything, but I will double check just to make sure.

[nitedog]

good call @yatil! i hope that's it...

[yatil]

I did an update, @nitedog, @terrill, now I can activate the fullscreen mode in all browsers I (quickly) tested, but the video is not displayed in full (but only small) and the controls are displayed weird as well…

Chrome:

Safari:

Firefox:

I guess most of the video size behavior has to do with our CSS and I might be able to fix it. But the controls behave very strange and I don’t know if that is entirely our fault ;-)

[terrill]

@yatil @nitedog You have the following style in wai-style-changes.css:

.video-container iframe,
.video-container .able-wrapper {
  max-width: 450px !important;
}

That property is in effect even when in full screen mode, which is why the video iframe and the controller are both 450 pixels wide. If you remove that property the default player is larger but from my (limited) testing it seems to scale well, and eliminates the problem you're experiencing in full screen mode.

[yatil]

Ah, makes sense :-) Thanks for looking into it, @terrill!

I wanted to make sure that the transcription is next to the video, not below it. Looks like I have to play with :fullscreen selectors to make it work.

[yatil]

I think it is much better with the implementation of the redesign, but I don’t see controls in Safari’s fullscreen. I have to double-check that.

https://w3c.github.io/wai-website/perspective-videos/keyboard/

[terrill]

@yatil do you not see any controls at all in Safari? In Safari 11 (MacOS Sierra 10.12.6), I'm seeing all controls, but not the status bar.

Just confirmed that this is an issue with Able Player, not unique to your site. It's now logged as an Able Player issue: https://github.com/ableplayer/ableplayer/issues/302