How to change html5 video play button overlay transparency
The default settings for Firefox's Video tag overlay a play button on the window that has a semi-transparent overlay, and it gets darker when you hover over it. Chrome does not do this by default, and I kind of like that better. How can I keep the play button, but get rid of the color changing overlay? I can't find how to style that. Any help is appreciated. Thanks guys/gals.
All Replies (3)
Are you a webmaster seeking to modify a particular website, or do you want to customize how it looks for you personally?
For a local override, you could try targeting the .clickToPlay selectors in this file: chrome://global/skin/media/videocontrols.css
Hey thanks! That works for me. I should have specified though, I would like to be able to change it on my website so all viewers would see if that way as well. Is there a way for that?
How did you do the modification locally?
- If you did it using userContent.css (or a Stylish rule targeted at the HTML namespace) then it definitely would be worth a try.
- If you did it using userChrome.css (or a Stylish rule targeted at the XUL namespace) then you probably cannot modify it from the CSS rules loaded in content. But there is a way to "build your own" HTML5 player which presumably would give you complete control over the play button layer.