CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
Eswaran Arumugam
Eswaran Arumugam

Reputation: 77

HTML 5 Video player with custom button's are not working in Full Screen

I am creating a HTML 5 Video player with custom controls. I've referred the below url.

http://iandevlin.github.io/mdn/video-player/

Custom video player controls (Play, Pause, etc) were not working when the player in full screen in latest chrome and firefox browsers. Please help me to solve this.

Upvotes: 0

Views: 2764

Answers (1)

JoelBonetR
JoelBonetR

Reputation: 1572

The buttons on full screen remains under video#video, so you're trying to click the video layout instead of clicking on the buttons. Use z-index to reach this:

video#video{
    z-index: 1;
}
ul#video-controls{
    z-index: 9999;
}

This will move the buttons to the front, making it able for being clicked.

Upvotes: 1

Related Questions