Limited supportLimited browser support. Check compatibility before use.
Other Limited support

Media element pseudo-classes

The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.

Other

Overview

The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:buffering
150
15.4
15.4
Other
css.selectors.muted

`:muted`
150
15.4
15.4
css.selectors.paused

`:paused`
150
15.4
15.4
css.selectors.playing

`:playing`
150
15.4
15.4
css.selectors.seeking

`:seeking`
150
15.4
15.4
css.selectors.stalled

`:stalled`
150
15.4
15.4
css.selectors.volume-locked

`:volume-locked`
150
15.4
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
video:playing {
  outline: 2px solid green;
}
video:paused {
  opacity: 0.7;
}
audio:muted {
  filter: grayscale(1);
}

Live demo

playing

CSS playing demo.

PreviewFullscreen

one timestop

CSS one timeStop demo.

PreviewFullscreen

myu-t

CSS myu-t demo.

PreviewFullscreen

Use cases

  • Using Media element pseudo-classes

    The :playing, :paused, :seeking, :buffering, :stalled, :muted, and :volume-locked CSS pseudo-classes match <audio> and <video> elements based on their state.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features