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.

Answer 2

You need just to write this code in your css:

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

And the fulscreen button will hide

Answer 3

I think you are not able to do that without hiding all the controls. You can use its dom methods to implement your own controls and design them to look exactly the same as built in controls

Or you can also use external html5 video plugins to implement this

Answer 4

You can write your custom code for controls

eg. For changing video time use below code

document.getElementsByTagName('video')[0].currentTime=10;

Below link provides all necessary examples to do manual controls on video with javascript

HTML5 Video Events and API