CODEWITHSUNDEEP
htmlgoogle-chromehtml5-video
impulsgraw
impulsgraw

Reputation: 897

HTML5 video controls in Chrome: three-dots button doesn't work

In Chrome 83 I've added an HTML5 video player to the page, like

<video preload="auto" type="video/mp4" src="(...).mp4" controls></video>

And for some reason the three-dots button (which expands a drop-down with the Download and Picture-in-Picture buttons) doesn't work - nothing happens on a click.

HTML5 video player example preview

However, if I clicked "Full Screen" button and the video expanded to the full-screen, the three-dots button becomes functional and works perfectly.

BTW, there are no overflowing transparent elements, this button is clickable (I can see it fades and reacts on mouse events), but provides no effect. The issue is reproducible with JavaScript turned-off.

Why could it happen?

Upvotes: 1

Views: 1144

Answers (1)

impulsgraw
impulsgraw

Reputation: 897

I've just discovered this is happening when the video placed somewhere inside the block with transform: translate(0,0); style applied (even if it's nested).

Removing transform property from the ancestor block has fixed the problem.

Upvotes: 4

Related Questions