v150 · CSS · demo

State Inspector

Play, pause, seek, and mute the video below. The indicator panel on the right updates live using :playing, :paused, :seeking, :muted, and :volume-locked — no JavaScript, pure CSS selectors.

Chrome 150+ — requires media element pseudo-classes. Interact with the video controls and watch the pseudo-class indicators activate in real-time.

Video element

Interact: play/pause button, seek bar, mute/unmute, volume slider. Source: local CC0 MDN flower video fixture.

Active pseudo-classes

  • :playing — element is actively playing
  • :paused — paused or not yet started
  • :seeking — user is dragging the seek bar
  • :muted — muted attribute set
  • :volume-locked — UA-controlled volume (e.g., iOS) 
/* Pure CSS — no JavaScript needed */

/* Highlight the panel when video is playing */
.container:has(video:playing) .playing-row {
  background: var(--bg-paper);
  color: var(--text-black);
}

/* All states follow the same pattern: */
.container:has(video:paused)       .paused-row   { ... }
.container:has(video:seeking)      .seeking-row  { ... }
.container:has(video:muted)        .muted-row    { ... }
.container:has(video:volume-locked).locked-row   { ... }

/* Note: :buffering and :stalled work the same way but
   are harder to trigger in a demo environment */

see also

scenario focus

Select a scenario to focus its rendered example and summary.

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗