HTML5 Video Controls - make larger?

Question

I know you can customize the video controls to make your own buttons/layout, but is there any way I can just make the default controls larger?

Answer 1

Not in a cross-browser way, but the controls are built with Shadow DOM elements. In Chrome, at least, you can enable Show Shadow DOM in the dev tools settings, inspect the video player controls, and glean the CSS that you'd need to supply to affect these elements (in webkit browsers).

Sorry, not sure offhand what the support is in other browsers for inspecting and styling Shadow DOM stuff.

Answer 2

Here is a sample codepen where you can see some sample styling of the HTML5 video controls: codepen.io/BainjaminLafalize/pen/GiJwn

It's for webkit based browsers only - Chrome, Opera and Safari. For Firefox and Edge/IE - styling is not possible at the moment (August 2017).