Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I hide the play button that appears automatically on my HTML video?

  • 3 replies
  • 1 has this problem
  • 3 views
  • Last reply by cor-el

more options

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.

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)

more options

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.

more options

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.

more options

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.