HTML5 video - disable fullscreen only

Question

I am using the video tag for my page, and I am trying to exclude the fullscreen from the controls.

I see that the "controls" in general is only a true/false statement, but i am looking for a way to disable the fullscreen option from the video.

I could do controls false and use autoplay the video - Then i have no controls - and the video will just play.. - but i think this is too drastic a "solution".

So what kind of solution can be done to achieve what i am looking for ?

Answer 1

For browsers that incorporate a shadow DOM (e.g. newest version of Chrome), you can still use the default controls, but hide the fullscreen button.

Just be sure to include the following in your CSS:

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

As shadow DOM manipulation like this becomes more commonplace, more browsers will hopefully support it. Until then, stick to making custom controls or putting the video within an iframe as long as your src points to an html file with a video tag in it, and you specify allowfullscreen="false"for the iframe.