1

I'm having an issue with HTML 5 Video controls which can be viewed at:

http://www.filmsbyben.com/projects/beannchor/

In Chrome and Safari it displays correctly with no player controls and a large play button allowing the video to play. Whenever it is viewed in Firefox however the video controls display.

I have the following code added to the CSS which was required for controls to not display but has not worked for Firefox:

video::-webkit-media-controls-panel {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
  display: none;
  -webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
  display: none;
  -webkit-appearance: none
}

video::-webkit-media-controls {
  display: none;
  -webkit-appearance: none;
}

I have also have added controls="false" to the video tag with no luck in relation to Firefox.

Any help would be greatly appreciated.

TG90
  • 85
  • 1
  • 3
  • 10

1 Answers1

1

Remove controls attributes for video tag like this:

<video onended="videoEnded(this)" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" class="full-video video-button-fade" id="video-button-fade">
     <source onended="videoEnded(this)" type="video/mp4" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" src="https://player.vimeo.com/external/133027081.hd.mp4?s=6e831cbf174dc8d972293b3275a3b34711904df8&amp;profile_id=113"></source>
            Your browser does not support the video tag.
</video>
Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
  • If he Googled his own question, this would have been the first hit. http://stackoverflow.com/questions/14161516/html5-video-completely-hide-controls – Goombah Jul 29 '16 at 09:01
  • Thank you so much for this. Life saver, I've been searching for days for this, no clue how I didn't see the original link provided. Thanks again. – TG90 Jul 29 '16 at 09:07
  • Fantastic! I'm glad it helped :) – Mukesh Ram Jul 29 '16 at 09:10