Media element pseudo-classes
The :buffering CSS pseudo-class selector represents an element that is playable, such as <audio> or <video>, when the playable element is buffering a media resource.
An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback. For more information, see the Media buffering, seeking, and time ranges guide.
Note: An element is still considered to be :playing when it is "buffering". If :buffering matches an element, :playing will also match that element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | 150 | 15.4 | | 15.4 | |
| Other | ||||||
| `:muted` | | | 150 | 15.4 | | 15.4 |
| `:paused` | | | 150 | 15.4 | | 15.4 |
| `:playing` | | | 150 | 15.4 | | 15.4 |
| `:seeking` | | | 150 | 15.4 | | 15.4 |
| `:stalled` | | | 150 | 15.4 | | 15.4 |
| `:volume-locked` | | | 150 | 15.4 | | 15.4 |
Syntax
video:playing {
outline: 2px solid green;
}
video:paused {
opacity: 0.7;
}
audio:muted {
filter: grayscale(1);
}Live demo
Use cases
-
Using Media element pseudo-classes
The :buffering CSS pseudo-class selector represents an element that is playable, such as <audio> or <video>, when the playable element is buffering a media resource.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.