iandevlin.github.io icon indicating copy to clipboard operation
iandevlin.github.io copied to clipboard

Custom controls bar is cannot be toggled in full screen mode

Open jmarti705 opened this issue 7 years ago • 1 comments

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/

jmarti705 avatar Jun 19 '18 23:06 jmarti705

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!

jmarti705 avatar Jun 21 '18 16:06 jmarti705