How can I hide the play button that appears automatically on my HTML video?
I have a video on a web page. On my poster image, I have a play button built in. So, how can I hide the play button that appears automatically on the video in Firefox? I do not need two play buttons on top of each other.
Thanks in advance.
All Replies (3)
I don't know of a way to hide this button. It is controlled by this style sheet.
- chrome://global/content/bindings/videocontrols.css
I don't know if Stylish is able to hide this button as it doesn't respond to rules in userChrome.css being special code.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .clickToPlay {opacity:0!important}
The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.
Thanks for your response. I tried adding .clickToPlay {opacity:0!important} to my css file, along with chrome://global/content/bindings/videocontrols.css in the html, but that did not hide the play button.
No, that doesn't work for me as well and the DOM Inspector doesn't show this style rule as well. You would have to modify your script and omit your play button or give it a very low opacity (.05) to see if that still makes the button work.