BaselineLab
0Support

Media states

Observe seven real audio and video states, adjust their presentation, and distinguish playback, loading, and sound.

Read the guide

Ask AI

Media states

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Current selector.media-state-demo :where(video.media-sample, audio.media-sample):playing
Support unknownSpecificity—

Preparing the scenario and its results…

:playing matches during playback, including temporary interruptions caused by missing data.

Selector preview

Press Play or use the native controls to activate :playing.

Video
Audio

The browser keeps :playing during temporary loading pauses; Pause changes to :paused.

HTML
<section class="media-state-demo">
  <video class="media-sample" controls playsinline preload="metadata" src="/media/demo-video.mp4"></video>
  <audio class="media-sample" controls preload="metadata" src="/media/demo-audio.mp3"></audio>
</section>
Tailwind CSS
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<section class="grid max-w-[44rem] gap-4">
  <video class="w-full rounded-2xl border-2 border-[color-mix(in_srgb,_currentColor_24%,_transparent)] bg-[Canvas] transition duration-200 [&:playing]:border-[#6d5dfc] [&:playing]:bg-[#e9f8ff] [&:playing]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:playing]:scale-[1.02]" controls playsinline preload="metadata" src="/media/demo-video.mp4"></video>
  <audio class="w-full rounded-2xl border-2 border-[color-mix(in_srgb,_currentColor_24%,_transparent)] bg-[Canvas] transition duration-200 [&:playing]:border-[#6d5dfc] [&:playing]:bg-[#e9f8ff] [&:playing]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:playing]:scale-[1.02]" controls preload="metadata" src="/media/demo-audio.mp3"></audio>
</section>
CSS
.media-state-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 44rem;
}

.media-state-demo :where(video.media-sample, audio.media-sample) {
  inline-size: 100%;
  border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 1rem;
  background-color: Canvas;
  transition: border-color 200ms ease, box-shadow 200ms ease, scale 200ms ease;
}

.media-state-demo :where(video.media-sample, audio.media-sample):playing {
  border-color: #6d5dfc;
  background-color: #e9f8ff;
  box-shadow: 0 0 0 4px color-mix(in srgb, #6d5dfc 42%, transparent);
  scale: 1.02;
}

Educational guide to media state selectors

Seven states defined by the media player

Choose the pseudo-class for the media phase you need to communicate, not for the JavaScript event you happen to remember.

Back to playground

Playback

Distinguish advancing, being paused, and seeking to a new position.

:playing

Media in the playing state.

Specificity(0, 1, 0)
Behavior
  • It includes temporary buffering or stalled interruptions.
  • It stops matching after a user pause or when playback ends.
Examples
SelectorSpecificity(0, 1, 1)
video:playing
HTML
Matches: <video controls src="lesson.mp4"></video>
<audio controls src="lesson.mp3"></audio>
Common mistakes
  • It does not mean currentTime changes at every instant.
  • Do not treat it as merely the absence of :paused.
Read the full definitionOpens in a new tab

:paused

Media outside the playing state.

Specificity(0, 1, 0)
Behavior
  • It commonly matches before starting and after an explicit pause.
  • It is mutually exclusive with :playing.
Examples
SelectorSpecificity(0, 1, 1)
audio:paused
HTML
<video controls src="lesson.mp4"></video>
Matches: <audio controls src="lesson.mp3"></audio>
Common mistakes
  • It does not describe waiting for missing data.
  • Do not assume it only appears after pressing a button.
Read the full definitionOpens in a new tab

:seeking

Media seeking to a playback position.

Specificity(0, 1, 0)
Behavior
  • It may last only a few frames.
  • Native controls can activate it by changing position.
Examples
SelectorSpecificity(0, 2, 1)
.player video:seeking
HTML
<div class="player">
Matches:   <video controls src="film.mp4"></video>
</div>
Common mistakes
  • It is not the same as buffering.
  • Do not use simulation to report a real match.
Read the full definitionOpens in a new tab

Loading

Separate a temporary wait from a stalled transfer.

:buffering

Media temporarily stopped while obtaining data.

Specificity(0, 1, 0)
Behavior
  • The media keeps its intent to play.
  • The state implies :playing.
Examples
SelectorSpecificity(0, 1, 1)
video:buffering
HTML
Matches: <video controls src="lesson.mp4"></video>
<audio controls src="lesson.mp3"></audio>
Common mistakes
  • It is not a user pause.
  • It does not guarantee the full download is still active.
Read the full definitionOpens in a new tab

:stalled

Media whose data retrieval stopped unexpectedly.

Specificity(0, 1, 0)
Behavior
  • It describes an abnormal transfer interruption.
  • It also implies :playing.
Examples
SelectorSpecificity(0, 2, 0)
.podcast:stalled
HTML
Matches: <audio class="podcast" controls src="episode.mp3"></audio>
Common mistakes
  • It is not synonymous with every short wait.
  • CSS styling does not depend on handling the stalled event.
Read the full definitionOpens in a new tab

Sound

Distinguish muting media from having its volume locked by the platform.

:muted

Media whose audio is muted.

Specificity(0, 1, 0)
Behavior
  • It reflects the element muted state.
  • It can coexist with playback or pause.
Examples
SelectorSpecificity(0, 1, 1)
video:muted
HTML
Matches: <video muted controls src="intro.mp4"></video>
<video controls src="talk.mp4"></video>
Common mistakes
  • Zero volume and muted are not identical concepts.
  • It does not depend on hiding volume controls.
Read the full definitionOpens in a new tab

:volume-locked

Media whose volume cannot be changed.

Specificity(0, 1, 0)
Behavior
  • The platform or browser controls this state.
  • It may match even when the media is not muted.
Examples
SelectorSpecificity(0, 1, 1)
audio:volume-locked
HTML
<video controls src="lesson.mp4"></video>
Matches: <audio controls src="lesson.mp3"></audio>
Common mistakes
  • There is no API to force it for a demo.
  • Do not confuse it with disabled, which does not apply to media elements.
Read the full definitionOpens in a new tab