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!

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!

• javascript
• html

• That's up to the browser, all you can do is add the controls attribute on the video tag – adeneo Commented Jul 16, 2014 at 7:43
• 1 So, no controls over that? – Amir Zadeh Commented Jul 16, 2014 at 7:45
• Same question here. It's strange that there is no option to force the control to be visible all the time. Pretty basic need... – gregoiregentil Commented Jan 13, 2016 at 16:38

1 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.