CSS :playing

The :playing pseudo-class is intended to match media elements while playback is active. Browser support is limited, so do not depend on it as the only state indicator.

Syntax

video:playing {
  outline: 0.25rem solid #22c55e;
}

Reliable pattern

.media-card[data-state="playing"] {
  outline: 0.25rem solid #22c55e;
}

.media-card[data-state="paused"] {
  outline: 0.25rem solid #f97316;
}

Result:

Playing media state

Important note

Use media events to toggle a class or data attribute when you need dependable playback styling across browsers.