HTML 5: Force window controls to be always visible

Question

This is definitely a trivial thing but I failed to find a working solution on google! How do we force the controls of a html 5 video to always be visible. For example when the video is playing and the cursor is not on the video, the progress bar just fades away! Please let me know how to keep it there at all time!

Answer 1

You can style the controls by styling the pseudo elements. To force the controls to remain visible in Webkit browsers you can do:

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

And I imagine there are other vendor prefixes for the other browsers.