How to hide full screen button of the video tag in HTML5

Question

I need to hide the full screen button of the video tag in HTML5. Is there any way to achieve it ?

Thanks.

Answer 1

I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.

Simple webkit browser (chrome on windows) specific solution

The following solution is webkit specific

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
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-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

Here is the fiddle for it.

Warning:

1. This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
2. This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.

Update:

After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.

Taking care of Vendor specific implementations:

• The above solution is -webkit- browser specific and was tested in Chrome on Windows.
• The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
• Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:config page.
• Developers are advised to unlock the shadow DOM features in their browser.
• Then, they can inspect the <video> component

How to enable shadow DOM selection in Chrome

• Go to Chrome > Developer Tools > Settings (gear icon)
• Under Elements look for Show user agent shadow DOM option
• Check (select) the box
• You'll be able to inspect the underlying shadow DOM
• Observe their respective styling
• You will notice that they're similar to pseudo class selectors

Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5

• Finding the solution can be as easy as writing CSS with pseudo class selectors
• But like every other CSS, it might require a lot of trial-n-error
• And you might undergo a lot of frustration to make it work
• But always remember, it's worth it.

Additionally, as @paulitto suggests, DOM methods can be implemented after removing controls attribute from <video> element. Refer this tutorial for more.