Components / Surfaces & media
Video
Native video with optional click-to-play enhancement, no autoplay.
Basic structure
div.video-player[data-video-player] > video + button.video-play + p.video-statusHTML
<div class="video-player" data-video-player><video controls playsinline preload="none" poster="/assets/images/pattern-example.svg" aria-label="Sample flower video"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"></video><button class="button video-play" type="button" hidden>Play sample video</button><p class="video-status" role="status"></p></div>Options
| Class or attribute | What it does |
|---|---|
native controls | Baseline playback without JavaScript. |
data-video-player | Custom play overlay hides only after playback succeeds. |
figure | Wrap ordinary video in Figure when a caption is needed. |