Skip to content

Instantly share code, notes, and snippets.

@kampar
Created January 14, 2026 12:29
Show Gist options
  • Select an option

  • Save kampar/e7aa65a39210972ed1ba06f0f16ee912 to your computer and use it in GitHub Desktop.

Select an option

Save kampar/e7aa65a39210972ed1ba06f0f16ee912 to your computer and use it in GitHub Desktop.
Bookmarklet Video Panel
javascript:(function(){if(document.getElementById('yt-speed-panel'))return;const SPEEDS=[0.5,1,1.25,1.5,1.75,2,3,4,8];let currentSpeed=parseFloat(localStorage.getItem('yt-speed-preference'))||1;const style=document.createElement('style');style.textContent=`#yt-speed-panel{position:fixed;top:15%;right:20px;background:rgba(28,28,28,0.9);border-radius:8px;padding:12px;z-index:2147483647;box-shadow:0 4px 12px rgba(0,0,0,0.3);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);font-family:Arial,sans-serif;min-width:120px;color:white}#yt-speed-panel:hover{background:rgba(40,40,40,0.95)}.speed-header{font-size:12px;font-weight:700;margin-bottom:8px;text-align:center;opacity:.8;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:6px;cursor:move}.speed-btn{display:block;width:100%;padding:8px 12px;margin:4px 0;background:rgba(255,255,255,0.1);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;text-align:center;transition:all .2s ease}.speed-btn:hover{background:rgba(255,255,255,0.2);transform:translateX(-2px)}.speed-btn.active{background:red;font-weight:700;box-shadow:0 2px 8px rgba(255,0,0,0.3)}.current-speed{background:rgba(255,255,255,0.05);color:red;font-weight:700;font-size:14px;margin:8px 0;padding:10px;border-radius:4px;text-align:center;border:1px solid rgba(255,0,0,0.2)}.panel-controls{display:flex;justify-content:space-between;margin-top:8px;gap:4px}.control-btn{flex:1;padding:6px;font-size:11px;background:rgba(255,255,255,0.08)}.toggle-panel{position:fixed;top:20px;right:20px;background:red;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;z-index:2147483646;box-shadow:0 4px 12px rgba(255,0,0,0.3);display:none;align-items:center;justify-content:center}#yt-speed-notification{position:fixed;top:80px;right:20px;background:rgba(255,0,0,0.9);color:#fff;padding:10px 16px;border-radius:6px;font-family:Arial,sans-serif;font-size:14px;font-weight:700;z-index:2147483647;animation:fadeOut 2s forwards;animation-delay:1s}@keyframes fadeOut{from{opacity:1}to{opacity:0}}`;document.head.appendChild(style);function setPlaybackSpeed(e){document.querySelectorAll("video").forEach(t=>t.playbackRate=e),currentSpeed=e,updateUI(),showNotification(e),localStorage.setItem("yt-speed-preference",e)}function showNotification(e){const t=document.getElementById("yt-speed-notification");t&&t.remove();const n=document.createElement("div");n.id="yt-speed-notification",n.textContent=`Speed: ${e}x`,document.body.appendChild(n),setTimeout(()=>{n.parentNode&&n.remove()},3e3)}function updateUI(){const e=document.getElementById("current-speed-display");e&&(e.textContent=`Current: ${currentSpeed}x`),document.querySelectorAll(".speed-btn").forEach(e=>{e.classList.toggle("active",parseFloat(e.dataset.speed)===currentSpeed)})}const panel=document.createElement("div");panel.id="yt-speed-panel";const header=document.createElement("div");header.className="speed-header",header.textContent="Speed Control";let isDragging=!1,currentX,currentY,initialX,initialY,xOffset=0,yOffset=0;function dragStart(e){initialX=e.clientX-xOffset,initialY=e.clientY-yOffset,e.target===header&&(isDragging=!0)}function dragEnd(){initialX=currentX,initialY=currentY,isDragging=!1}function drag(e){isDragging&&(e.preventDefault(),currentX=e.clientX-initialX,currentY=e.clientY-initialY,xOffset=currentX,yOffset=currentY,panel.style.transform=`translate(${currentX}px, ${currentY}px)`)}header.addEventListener("mousedown",dragStart),document.addEventListener("mouseup",dragEnd),document.addEventListener("mousemove",drag);const display=document.createElement("div");display.id="current-speed-display",display.className="current-speed",panel.appendChild(header),panel.appendChild(display),SPEEDS.forEach(e=>{const t=document.createElement("button");t.className="speed-btn",t.dataset.speed=e,t.textContent=`${e}x`,t.onclick=()=>setPlaybackSpeed(e),panel.appendChild(t)});const controls=document.createElement("div");controls.className="panel-controls";const reset=document.createElement("button");reset.className="speed-btn control-btn",reset.textContent="Reset",reset.onclick=()=>setPlaybackSpeed(1);const hide=document.createElement("button");hide.className="speed-btn control-btn",hide.textContent="Hide",hide.onclick=()=>{panel.style.display="none",toggleBtn.style.display="flex"},controls.appendChild(reset),controls.appendChild(hide),panel.appendChild(controls),document.body.appendChild(panel);const toggleBtn=document.createElement("button");toggleBtn.className="toggle-panel",toggleBtn.innerHTML="⚡",toggleBtn.onclick=()=>{panel.style.display="block",toggleBtn.style.display="none"},document.body.appendChild(toggleBtn),setPlaybackSpeed(currentSpeed),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{("VIDEO"===e.nodeName||e.querySelector&&e.querySelector("video"))&&setPlaybackSpeed(currentSpeed)})})}).observe(document.body,{childList:!0,subtree:!0})})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment