Are your Google Chrome HTML5 video controls grayed out or looking wonky? You can probably fix this by modifying your stylesheet.
A few months ago I noticed that almost every HTML5 video I posted on any blog of mine looked fine in every browser except for Google Chrome. The video controls in Chrome were grayed out and looked like what you see below.
After investigating the problem for a little bit, I determined that my site’s styling was now playing with the controls on those videos. Specifically, the “input” element.
To fix this and return everything back to normal, all I did was preface the “input” styling with “form” so that it became “form input”. Doing that stopped my blog from changing the appearance of the HTML5 video controls in Chrome and my video returned to looking like this:
If you’re having issues with your video controls, try this fix and see if it works for you. If you fixed it in another way, how did you do it?