jmarti705
commented
6 years ago This is resolved by calling the browser fullscreen api on an parent div container only and not the
Found solution answer here https://css-tricks.com/custom-controls-in-html5-video-full-screen/ with help form James Edwards comment https://css-tricks.com/custom-controls-in-html5-video-full-screen/#li-comment-561384
Help is helps anyone since this bug was hard to trace for me, thanks!
Custom controls bar is cannot be toggled in full screen mode in Chrome (not sure about other browsers at the moment). It looks to be some quirky z-index by the "video:-webkit-full-screen" user agent Chrome style sheet. I have for some hours try to add new positioning and z-indexing to parents its and the controls without any luck of getting the controls bar z-index to be higher that the video to make it interactive. Please let me know if there is so solution you can help with.
You can replicate the issue but clicking fullscreen mode here and then trying to toggle the custom control bar options. http://iandevlin.github.io/mdn/video-player/