0

To disable the HTML5 video fullscreen button in Chrome/Safari, this CSS works but not in FF/IE:

video::-webkit-media-controls-fullscreen-button {
        display: none;
    }

I found it in this thread where there is this fiddle that hides the fullscreen button in all browsers.

I duplicated that fiddle in a CodePen and the results are different. The button is hidden in Chrome/Safari but is showing in FF/IE. I missed something but I'm not sure what.

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {
   background: red; 
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
<video width="400" height="260" controls="">
 <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
Community
  • 1
  • 1
Retropunk
  • 19
  • 1
  • 5

1 Answers1

1

This is because codepen adds an allowfullscreen attribute on the iframe containing the pen's document, while jsfiddle doesn't.

So a solution for your problem could be to wrap your video in an iframe without this attribute : 

frame.contentDocument.body.innerHTML = '<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls></video>';

<iframe id="frame" width="100%" height="100%" src="about:blank" frameborder="0"></iframe>

Forked codepen : http://codepen.io/anon/pen/ONyELm

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • interesting. I would think the CSS would supersede the iframe attribute. Thanks for the solve. I'll give it a shot. – Retropunk Mar 05 '16 at 16:07
  • @Retropunk, your CSS is only targeting WebKit browsers. If it does work for others in js fiddle it's because of the iframe. – Kaiido Mar 05 '16 at 23:54
  • the iframe is certainly a fix for now but I was hoping for a CSS fix in FF/IE. At least I understand why it was different between CodePen and JSFiddle...Thanks guys – Retropunk Mar 08 '16 at 16:09