Edit Video Controls · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

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