Speed Selector
A copy-paste video player ui component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Video Player UIHTMLCSSany framework
0.5×1×1.5×2×
Copy into your project
HTML
<!-- Speed Selector — toggle .is-active on click; wire to video.playbackRate -->
<div class="nuda-speed">
<span class="nuda-speed__opt" data-speed="0.5">0.5×</span>
<span class="nuda-speed__opt is-active" data-speed="1">1×</span>
<span class="nuda-speed__opt" data-speed="1.5">1.5×</span>
<span class="nuda-speed__opt" data-speed="2">2×</span>
</div>CSS
/* Speed Selector
Compact playback-speed pill row.
Customize: --speed-accent */
.nuda-speed {
--speed-accent: #e4ff54;
display: inline-flex;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 3px;
backdrop-filter: blur(8px);
}
.nuda-speed__opt {
padding: 5px 10px;
font: 700 0.7rem ui-sans-serif, system-ui, sans-serif;
color: #a1a1aa;
cursor: pointer;
border-radius: 5px;
font-variant-numeric: tabular-nums;
transition: background 0.2s, color 0.2s;
}
.nuda-speed__opt:hover {
color: #fafafa;
background: rgba(255, 255, 255, 0.06);
}
.nuda-speed__opt.is-active {
background: var(--speed-accent);
color: #09090b;
box-shadow: 0 0 6px rgba(228, 255, 84, 0.4);
}How to use Speed Selector
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.