Disabling fullscreen button on HTML5 video tag

Question

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.org/en-US/docs/Web/HTML/Element/video. My question is: how is it done?

Killian

Answer 1

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

Ster

so far neither Firefox nor Safari support this – Divebomb

Answer 2

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>

Brana

Answer 3

Remember that Firefox dosnt support this controlList property

Bidden

Welcome to the community @Bidden . You could probably just comment this instead of posting it. Overall, you could use more information in order to answer the OP's question instead of only reminding about something that is not that relevant to the question. – Berkeleianism

Answer 4

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

Korfonta