Play/pause, seek, volume and fullscreen controls.
<div class="vc " style="--accent:#A8E6C1;">
<input type="checkbox" id="vc-play" class="vc__play-input" aria-label="Play or pause" />
<label for="vc-play" class="vc__play-btn">
<svg class="vc__icon-play" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><polygon points="8,6 19,12 8,18" fill="currentColor"/></svg>
<svg class="vc__icon-pause" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><rect x="7" y="6" width="4" height="12" fill="currentColor"/><rect x="14" y="6" width="4" height="12" fill="currentColor"/></svg>
</label>
<input class="vc__seek" type="range" min="0" max="100" value="35" aria-label="Seek" />
<span class="vc__time">1:12 / 3:20</span>
<span class="vc__volume">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9H4z" fill="currentColor"/></svg>
<input class="vc__volume-range" type="range" min="0" max="100" value="70" aria-label="Volume" />
</span>
<button type="button" class="vc__fullscreen" aria-label="Fullscreen">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="currentColor" stroke-width="2" fill="none"/></svg>
</button>
</div>
<style>
.vc { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 10px 12px; border-radius: 10px; background: #241430; color: #FAF7F2; }
.vc--compact { padding: 6px 10px; gap: 6px; }
.vc__play-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vc__play-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #241430; cursor: pointer; flex: none; }
.vc__play-input:focus-visible + .vc__play-btn { outline: 2px solid #FAF7F2; outline-offset: 2px; }
.vc__icon-pause { display: none; }
.vc__play-input:checked + .vc__play-btn .vc__icon-play { display: none; }
.vc__play-input:checked + .vc__play-btn .vc__icon-pause { display: block; }
.vc__seek { flex: 1; accent-color: var(--accent); }
.vc__time { font: 12px/1 system-ui, sans-serif; white-space: nowrap; flex: none; }
.vc__volume { display: flex; align-items: center; gap: 4px; flex: none; }
.vc__volume-range { width: 56px; accent-color: var(--accent); }
.vc__fullscreen { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: #FAF7F2; cursor: pointer; flex: none; }
.vc__fullscreen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style><div class="vc-tw flex items-center gap-2.5 max-w-[380px] px-3 py-2.5 rounded-[10px] bg-[#241430] text-[#FAF7F2]" style="--accent:#A8E6C1;">
<input type="checkbox" id="vc-tw-play" class="vc-tw__play-input absolute opacity-0 w-px h-px" aria-label="Play or pause" />
<label for="vc-tw-play" class="vc-tw__play-btn flex items-center justify-center w-[30px] h-[30px] rounded-full cursor-pointer flex-none" style="background:var(--accent);color:#241430;">
<svg class="vc-tw__icon-play" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><polygon points="8,6 19,12 8,18" fill="currentColor"/></svg>
<svg class="vc-tw__icon-pause hidden" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><rect x="7" y="6" width="4" height="12" fill="currentColor"/><rect x="14" y="6" width="4" height="12" fill="currentColor"/></svg>
</label>
<input class="vc-tw__seek flex-1" style="accent-color:var(--accent);" type="range" min="0" max="100" value="35" aria-label="Seek" />
<span class="text-xs whitespace-nowrap flex-none">1:12 / 3:20</span>
<span class="flex items-center gap-1 flex-none">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9H4z" fill="currentColor"/></svg>
<input class="w-14" style="accent-color:var(--accent);" type="range" min="0" max="100" value="70" aria-label="Volume" />
</span>
<button type="button" class="flex items-center justify-center w-[26px] h-[26px] rounded-md border-none bg-transparent text-[#FAF7F2] cursor-pointer flex-none" aria-label="Fullscreen">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="currentColor" stroke-width="2" fill="none"/></svg>
</button>
</div>
<style>
.vc-tw--compact { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
.vc-tw__play-input:checked + .vc-tw__play-btn .vc-tw__icon-play { display: none; }
.vc-tw__play-input:checked + .vc-tw__play-btn .vc-tw__icon-pause { display: block; }
.vc-tw__play-input:focus-visible + .vc-tw__play-btn { outline: 2px solid #FAF7F2; outline-offset: 2px; }
</style>export function VideoControls({
accent = "#A8E6C1",
showVolume = true,
showFullscreen = true,
compact = false,
}) {
return (
<div style={{ display: "flex", alignItems: "center", gap: compact ? 6 : 10, maxWidth: 380,
padding: compact ? "6px 10px" : "10px 12px", borderRadius: 10, background: "#241430", color: "#FAF7F2" }}>
{/* Wire onClick to your own play/pause state in production. */}
<button type="button" aria-label="Play or pause" style={{ display: "flex", alignItems: "center",
justifyContent: "center", width: 30, height: 30, borderRadius: "50%", background: accent,
color: "#241430", border: "none", cursor: "pointer", flex: "none" }}>
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><polygon points="8,6 19,12 8,18" fill="currentColor" /></svg>
</button>
<input type="range" min={0} max={100} defaultValue={35} aria-label="Seek" style={{ flex: 1, accentColor: accent }} />
<span style={{ font: "12px/1 system-ui, sans-serif", whiteSpace: "nowrap", flex: "none" }}>1:12 / 3:20</span>
{showVolume && (
<span style={{ display: "flex", alignItems: "center", gap: 4, flex: "none" }}>
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9H4z" fill="currentColor" /></svg>
<input type="range" min={0} max={100} defaultValue={70} aria-label="Volume" style={{ width: 56, accentColor: accent }} />
</span>
)}
{showFullscreen && (
<button type="button" aria-label="Fullscreen" style={{ display: "flex", alignItems: "center",
justifyContent: "center", width: 26, height: 26, borderRadius: 6, border: "none",
background: "transparent", color: "#FAF7F2", cursor: "pointer", flex: "none" }}>
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" stroke="currentColor" strokeWidth="2" fill="none" /></svg>
</button>
)}
</div>
);
}