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

fullscreen, html, html5-video

Solution

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:

- 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.

- 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.

Problem

Original source