CODEWITHSUNDEEP
htmlcssfirefoxvideohtml5-video
TG90
TG90

Reputation: 85

HTML5 Video Controls hiding in Chrome and Safari but not in Firefox

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.

Upvotes: 1

Views: 8153

Answers (1)

Mukesh Ram
Mukesh Ram

Reputation: 6328

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>

Upvotes: 1

Related Questions