Playground de :seeking en CSS

Explora :seeking con elementos <audio> y <video>. Ajusta el estilo que se aplica mientras el navegador busca una nueva posición del medio.

Pulsa buscar o arrastra la línea de tiempo. El estado real puede durar muy poco, por eso la simulación está disponible.

Video

Audio

:seeking suele ser transitorio: en archivos pequeños puede activarse y desactivarse casi instantáneamente.

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 [&:seeking]:border-[#6d5dfc] [&:seeking]:bg-[#e9f8ff] [&:seeking]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:seeking]: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 [&:seeking]:border-[#6d5dfc] [&:seeking]:bg-[#e9f8ff] [&:seeking]:shadow-[0_0_0_4px_color-mix(in_srgb,_#6d5dfc_42%,_transparent)] [&:seeking]: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):seeking {
  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):seeking {
    border-color: #6d5dfc;
    background-color: #e9f8ff;
    box-shadow: 0 0 0 4px color-mix(in srgb, #6d5dfc 42%, transparent);
    scale: 1.02;
  }
}