controlslist
The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The controlslist attribute for <audio> or <video> hides parts of the browser's built-in controls. For example, controlslist="nofullscreen" removes the button to play the video in fullscreen. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 58 | 79 | | | 58 | | |
| HTML attribute | ||||||
controlslist | 58 | 79 | | | 58 | |
controlslist | 58 | 79 | | | 58 | |
Syntax
<video controls controlslist="nodownload nofullscreen noremoteplayback"
src="video.mp4">
</video>Live demo
Hide download control
Use controlslist tokens to hint which built-in controls should be suppressed.
Multiple control hints
Combine tokens such as nodownload, noplaybackrate, and nofullscreen.
Player policy card
Document why a product might limit built-in controls for a focused viewing flow.
Use cases
Enhance media playback
Use controlslist when audio, video, or responsive media needs better control or more capable browser behavior.
Deliver flexible assets
Apply controlslist to adapt media loading or presentation more closely to user context and device capability.
Cautions
- Test controlslist in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Pair richer media behavior with captions, transcripts, controls, and loading behavior that remain understandable to all users.
Related links
Powered by web-features