CSS :volume-locked playground

Explore :volume-locked with <audio> and <video> elements. Define styles for when the browser or platform locks volume control.

This state depends on browser and operating system behavior. Use simulation to design the style even if your platform does not lock volume.

Video

Audio

:volume-locked is not the same as :muted; it describes a locked volume control, not muted media.

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