CODEWITHSUNDEEP
javascripthtmlhtml5-video
stack
stack

Reputation: 55

Disabling fullscreen button on HTML5 video tag

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?

Upvotes: 5

Views: 13974

Answers (4)

Esteban MANSART
Esteban MANSART

Reputation: 561

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>

Upvotes: 1

Laassari
Laassari

Reputation: 326

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

Upvotes: 0

Sckq
Sckq

Reputation: 1

Remember that Firefox dosnt support this controlList property

Upvotes: 0

Kazimierz Niewielki
Kazimierz Niewielki

Reputation: 505

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

Upvotes: 8

Related Questions