Retropunk Retropunk - 4 months ago 103x
CSS Question

How can I disable the native fullscreen video button from controls in Firefox and IE?

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-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="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogg" />


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="" controls></video>';
<iframe id="frame" width="100%" height="100%" src="about:blank" frameborder="0"></iframe>

Forked codepen :