CSS :playing playground

Explore :playing with <audio> and <video> elements. Change the style applied while media is playing and copy the generated CSS.

Press play to test the real state or keep simulation enabled to review the style at all times.

Video

Audio

:playing only matches while the element is advancing and is not paused, waiting for data, or stopped.

HTML

<section class="media-state-demo">
  <video class="media-sample" controls muted 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 muted 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;
}

.media-state-demo {
  display: grid;
  gap: 1rem;
  max-inline-size: 44rem;

  :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;
  }
}