The pill shaped background needs to move lower left to be exactly behind the 1x
Here is the full script code in Tampermonkey.
// ==UserScript== // @name YouTube Playback Speed Toggle Button // @namespace http://tampermonkey.net/ // @version 2.2 // @description Adds a button to toggle YouTube video playback speed with fullscreen mode support and key bindings for speed control // @author Mike // @match https://www.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @grant none // ==/UserScript== (function () { 'use strict'; function addSpeedButton() { const settingsButton = document.querySelector('.ytp-settings-button'); if (!settingsButton) return; if (document.querySelector('#speed-toggle-button')) return; // Create the speed toggle button const speedToggleButton = document.createElement('button'); speedToggleButton.id = 'speed-toggle-button'; speedToggleButton.className = 'ytp-button'; speedToggleButton.textContent = '1x'; speedToggleButton.style.fontSize = '18px'; speedToggleButton.style.fontWeight = 'bold'; speedToggleButton.style.padding = '4px'; speedToggleButton.style.margin = '0'; speedToggleButton.style.position = 'relative'; speedToggleButton.style.left = '10px'; speedToggleButton.style.top = '-12px'; // Add tooltip const tooltip = document.createElement('div'); tooltip.className = 'ytp-tooltip custom-tooltip'; tooltip.textContent = 'Adjust speed (s)'; tooltip.style.position = 'absolute'; tooltip.style.padding = '6px 8px'; tooltip.style.backgroundColor = '#181818'; tooltip.style.color = '#fff'; tooltip.style.fontSize = '13px'; tooltip.style.borderRadius = '4px'; tooltip.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)'; tooltip.style.whiteSpace = 'nowrap'; tooltip.style.opacity = '0'; tooltip.style.transition = 'opacity 0.2s'; tooltip.style.pointerEvents = 'none'; tooltip.style.zIndex = '9999'; document.body.appendChild(tooltip); function showTooltip() { const rect = speedToggleButton.getBoundingClientRect(); tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`; tooltip.style.opacity = '1'; } function hideTooltip() { tooltip.style.opacity = '0'; } speedToggleButton.addEventListener('mouseover', showTooltip); speedToggleButton.addEventListener('mouseout', hideTooltip); // Function to adjust playback speed function adjustSpeed(delta) { const video = document.querySelector('video'); if (video) { let newSpeed = Math.max(0.2, Math.min(3, video.playbackRate + delta)); // Limit speed between 0.2x and 3x video.playbackRate = newSpeed; speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`; } } // Click functionality: Increment speed by 0.2, loop back to 1x after 2.0x speedToggleButton.addEventListener('click', () => { const video = document.querySelector('video'); if (video) { let currentSpeed = video.playbackRate; let newSpeed = currentSpeed >= 2.0 ? 1 : currentSpeed + 0.2; // Loop back to 1x after 2.0x video.playbackRate = parseFloat(newSpeed.toFixed(1)); speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`; } }); // Event listeners for key bindings document.addEventListener('keydown', (event) => { const activeElement = document.activeElement; const isInputField = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable; if (!isInputField) { if (event.key.toLowerCase() === 's') { adjustSpeed(0.2); // Increase speed } else if (event.key.toLowerCase() === 'a') { adjustSpeed(-0.2); // Decrease speed } else if (event.key.toLowerCase() === 'r') { // Reset speed to normal const video = document.querySelector('video'); if (video) { video.playbackRate = 1; // Reset to normal speed speedToggleButton.textContent = '1x'; // Update button text } } } }); // Insert button next to settings button settingsButton.parentNode.insertBefore(speedToggleButton, settingsButton.nextSibling); // Fullscreen detection function updateForFullscreen() { if (document.fullscreenElement) { // Increase font size in fullscreen mode speedToggleButton.style.fontSize = '24px'; tooltip.style.fontSize = '20px'; } else { // Revert to normal size speedToggleButton.style.fontSize = '18px'; tooltip.style.fontSize = '13px'; } } // Listen for fullscreen changes document.addEventListener('fullscreenchange', updateForFullscreen); } const observer = new MutationObserver(() => addSpeedButton()); observer.observe(document.body, { childList: true, subtree: true }); })();
