Ruta por la costa
Glass video controls
A glass capsule with play, a progress bar and time over a video scene that comes alive when playing.
Settings
Code
<div class="uv-gvc"><div class="sn" aria-hidden="true"><i class="sun"></i><i class="cl a"></i><i class="cl b"></i><i class="hl"></i></div><p class="ti">Coastal road trip</p><div class="cb"><button type="button" class="pp" aria-label="Play" aria-pressed="false"><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/><rect x="13.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/></svg></button><span class="tm">0:42</span><input type="range" min="0" max="180" value="42" aria-label="Position"><span class="tm du">3:00</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Video players increasingly float their controls as a single glass capsule over the footage. This one sits at the bottom of a sunset scene: the play button morphs into pause, the custom range slider fills as time passes and the elapsed time updates every second, while clouds drift across the scene only while it plays.
The scrubber is a native range input with a styled thumb that grows when dragged, so it works with keyboard and touch. Connect play and the range to a real video element and keep the same layout and states.