Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
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. |
Basic controls
<!-- Video with native controls --><video src="demo.mp4" controls width="640" height="360"></video> <!-- Audio with native controls --><audio src="podcast.mp3" controls></audio> <!-- No controls attribute = no visible UI --><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 |
Selective button removal
<!-- Hide the download button --><video src="training.mp4" controls controlslist="nodownload" width="640" height="360"></video> <!-- Hide download and fullscreen --><video src="preview.mp4" controls controlslist="nodownload nofullscreen" width="640" height="360"></video> <!-- Hide remote playback (Chromecast / AirPlay) --><audio src="music.mp3" controls controlslist="noremoteplayback"></audio> <!-- Combine all restrictions --><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.
Keyboard shortcuts
<!-- All keyboard shortcuts work when the media element has focus --><video src="lecture.mp4" controls width="640" height="360"></video> <!-- Keyboard controls (browser-dependent): Space / K Play / Pause Left arrow Seek backward 5-10 seconds Right arrow Seek forward 5-10 seconds Up arrow Volume up Down arrow Volume down M Toggle mute F Toggle fullscreen (video only) Home Jump to beginning End Jump to end-->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.
Toggle controls via JS
<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-labelvalues on all interactive elements. - The
<audio>element withoutcontrolsis invisible and takes up no space. Screen reader users may not know it exists. Always includecontrolson 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-panelare non-standard and may break across versions. controlslisthides 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.
controlslisthas no effect. - The
controlsattribute is boolean. Writingcontrols="false"still shows controls because the attribute is present. Remove the attribute to hide them. - Audio elements without
controlscollapse to zero height with no visible indication of their existence.