v152 · CSS · Media

Video Gallery

Six simulated video players styled entirely by CSS :playing, :paused, and :muted pseudo-classes — blue highlight when playing, amber when paused, mute icon overlay when muted. No JavaScript reads or sets class names for state; the CSS does it automatically.

:playing (blue) :paused (amber) :paused (initial, no style) 🔇 :muted overlay

Click the play/pause/mute buttons on each card. The thumbnail background and badge change purely via CSS — no JS class toggling.

/* State-driven thumbnail background — pure CSS, no JS */
video:playing  ~ .thumb { background: #dbeafe; }
video:paused   ~ .thumb { background: #fef3c7; }

/* Mute icon via ::after — only shown when :muted */
video:muted ~ .thumb::after {
  content: '🔇';
  position: absolute;
  bottom: 0.3rem;
  right:  0.3rem;
}

/* Progress bar color changes while :playing */
video:playing ~ .progress-track .fill { background: var(--accent-blue); }

see also