Created
January 14, 2026 12:29
-
-
Save kampar/e7aa65a39210972ed1ba06f0f16ee912 to your computer and use it in GitHub Desktop.
Bookmarklet Video Panel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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