When googling for 'disable HTML5 video fullscreen' most of the answers suggest that I disable custom controls of the <video> tag and build myself custom ones but right there on the MDN site, there's an article on <video> tag with all the examples having disabled just that one button (enter full screen mode): . My question is: how is it done?

When googling for 'disable HTML5 video fullscreen' most of the answers suggest that I disable custom controls of the <video> tag and build myself custom ones but right there on the MDN site, there's an article on <video> tag with all the examples having disabled just that one button (enter full screen mode): https://developer.mozilla/en-US/docs/Web/HTML/Element/video. My question is: how is it done?

• javascript
• html
• html5-video

4 Answers 4

The controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified). The allowed values are nodownload, nofullscreen and noremoteplayback.

<video controls controlsList="nofullscreen">

https://googlechrome.github.io/samples/media/controlslist.html

I don't know how your exemple works, but you can try this

<video controls controlsList="nofullscreen">
  <source src="video.mp4" type="video/mp4">
</video>

Remember that Firefox dosnt support this controlList property

The reason fullscreen is disabled is because browsers don't allow iframes to enter fullscreen. this can fixed by adding the attribute "allowfullscreen" to the iframe tag. more in MDN