Playground de :playing en CSS

Explora :playing con elementos <audio> y <video>. Cambia el estilo que se aplica mientras el medio se reproduce y copia el CSS generado.

Pulsa reproducir para probar el estado real o deja activada la simulación para revisar el estilo siempre.

Video

Audio

:playing solo coincide mientras el elemento está avanzando y no está pausado, esperando datos o detenido.

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

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

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