controls

Show native media controls on audio and video elements. Boolean attribute with controlslist for selective button removal.

Overview

The controls attribute tells the browser to display its built-in media controls: play/pause button, progress bar, volume slider, time display, and (for video) a fullscreen button. Without this attribute, the media element renders with no visible interface.

This is a boolean attribute. Its presence enables controls; its absence disables them. There is no controls="false" — remove the attribute entirely to hide controls.

Applies to: <audio>, <video>

Values

State	Behavior
`controls` (present)	Browser renders native play, pause, seek, volume, and fullscreen UI
(absent)	No visible controls. Media can only be controlled via JavaScript or autoplay.

<video src="demo.mp4" controls width="640" height="360"> </video>  <audio src="podcast.mp3" controls></audio>  <video src="background.mp4" autoplay muted loop playsinline width="1280" height="720"> </video>

controlslist

The controlslist attribute selectively removes specific buttons from the native controls. It accepts a space-separated list of tokens.

Token	Hides
`nodownload`	Download button
`nofullscreen`	Fullscreen button (video only)
`noremoteplayback`	Cast / AirPlay button

<video src="training.mp4" controls controlslist="nodownload" width="640" height="360"> </video>  <video src="preview.mp4" controls controlslist="nodownload nofullscreen" width="640" height="360"> </video>  <audio src="music.mp3" controls controlslist="noremoteplayback"></audio>  <video src="confidential.mp4" controls controlslist="nodownload nofullscreen noremoteplayback" width="640" height="360"> </video>

controlslist is supported in Chromium-based browsers. Firefox and Safari may ignore it.

Keyboard Controls

When the media element has focus, native controls respond to keyboard shortcuts. The exact keys vary by browser, but the common set is consistent.

<video src="lecture.mp4" controls width="640" height="360"> </video>

These keyboard shortcuts only work when the media element (or its controls) has focus. Use tabindex if you need to ensure the element is reachable via tab navigation in a custom layout.

Toggling Controls with JavaScript

The controls property can be set via JavaScript to show or hide controls dynamically. This is useful for custom players that reveal native controls on hover or as a fallback.

<video id="player" src="demo.mp4" width="640" height="360"></video> <button id="toggle-controls">Show controls</button> <script> const video = document.getElementById('player'); const btn = document.getElementById('toggle-controls'); btn.addEventListener('click', () => { video.controls = !video.controls; btn.textContent = video.controls ? 'Hide controls' : 'Show controls'; }); </script>

Accessibility

Media without controls and without custom UI is an accessibility violation. If you omit controls, you must provide a fully keyboard-accessible custom player. Users who cannot use a mouse have no way to play, pause, seek, or adjust volume otherwise.
Native controls are inherently accessible: they have proper ARIA roles, keyboard support, and focus management built in by the browser.
If you build a custom player, replicate all native keyboard shortcuts (space for play/pause, arrows for seek, M for mute) and provide aria-label values on all interactive elements.
The <audio> element without controls is invisible and takes up no space. Screen reader users may not know it exists. Always include controls on audio elements unless you provide a visible custom player.

Limitations

Native control styling is browser-specific and cannot be fully customized with CSS. Pseudo-elements like ::-webkit-media-controls-panel are non-standard and may break across versions.
controlslist hides buttons from the UI but does not prevent the underlying functionality. Users can still download the video via right-click or browser dev tools.
On iOS Safari, video controls always include a fullscreen button and an AirPlay button. controlslist has no effect.
The controls attribute is boolean. Writing controls="false" still shows controls because the attribute is present. Remove the attribute to hide them.
Audio elements without controls collapse to zero height with no visible indication of their existence.