• _hello
  • _about-me
  • _projects
  • _blog
  • _support
_contact-me
find me in:
@faeztgh
cd ../blog~/blog/youtube-playback-controller
  • Chrome Extension
  • YouTube
  • React
  • TypeScript
  • AI

YouTube Playback Controller: A Powerful Chrome Extension for Video Speed Control

A deep dive into YouTube Playback Controller, an open-source Chrome extension with precise speed control, automation rules, profiles, and reverse playback.

FFaez Tgh·Aug 20, 20255 min read·1,046 words
// share: post linkedin
YouTube Playback Controller Chrome extension popup showing speed slider and presets

Have you ever wanted to watch YouTube videos at your own pace? Whether you're trying to speed through a slow lecture or slow down a fast-paced tutorial, the YouTube Playback Controller extension gives you complete control over video playback speed with a beautiful, intuitive interface.

This Chrome extension goes far beyond YouTube's basic speed controls, offering advanced features like automation rules, custom presets, profiles, and even reverse playback. Let me walk you through what makes this extension special and how you can use it to enhance your YouTube experience.

What is YouTube Playback Controller?#

YouTube Playback Controller is a feature-rich Chrome extension that provides granular control over YouTube video playback speeds. Unlike YouTube's built-in speed controls that only offer a few preset options, this extension gives you:

  • Precise Speed Control: A slider that lets you set any speed from 0.1x to 4x
  • Custom Presets: Save your favorite speeds for quick access
  • Automation Rules: Automatically apply speeds based on channel, title, or URL patterns
  • Profiles: Switch between different sets of presets and defaults
  • Reverse Playback: Yes, you can actually play videos backwards!
  • Real-time Badge: See the current speed in your browser toolbar
  • In-page Overlay: Control speed without leaving the video

Key Features That Set It Apart#

1. Intelligent Speed Synchronization#

The extension stays perfectly in sync with YouTube's native controls. Change the speed in the extension popup, and it updates in YouTube instantly. Change it in YouTube's gear menu, and the extension updates immediately. This bidirectional sync ensures you never lose track of your current playback speed.

2. Advanced Automation System#

One of the most powerful features is the automation rules system. You can create rules like:

  • Channel-based: Automatically set all videos from "Veritasium" to 1.5x speed
  • Title-based: Apply 1.75x speed to any video with "tutorial" in the title
  • URL-based: Set 1.25x speed for all YouTube Shorts (youtu.be links)

This is perfect for channels where you always want a specific speed, or for content types that benefit from consistent playback adjustments.

3. Custom Presets and Profiles#

Create multiple profiles for different use cases:

  • Study Profile: Default 1.25x with presets [0.75x, 1x, 1.25x, 1.5x]
  • Entertainment Profile: Default 1x with presets [0.5x, 1x, 1.5x, 2x]
  • Work Profile: Default 1.5x with presets [1.25x, 1.5x, 1.75x, 2x]

Switch between profiles instantly based on what you're watching.

4. Reverse Playback (Yes, Really!)#

This feature is genuinely unique. You can set negative speeds (like -1x, -1.5x) to play videos backwards. Perfect for:

  • Reviewing a specific moment in slow motion
  • Understanding complex movements or processes
  • Creating unique content effects

5. Smart Badge System#

The extension shows your current playback speed as a badge next to the toolbar icon. It automatically:

  • Updates in real-time as you change speeds
  • Shows negative values for reverse playback
  • Clears on non-YouTube pages
  • Provides instant visual feedback

How to Install and Use#

Installation#

  1. Install Dependencies: Make sure you have Node.js (≥18) and pnpm (≥8)
  2. Clone the Repository:
bash
git clone https://github.com/faeztgh/Youtube-playback-speed-extention.git
cd Youtube-playback-speed-extention
  1. Install and Build:
bash
pnpm install
pnpm run build
  1. Load in Chrome:
    • Open chrome://extensions
    • Enable "Developer mode"
    • Click "Load unpacked" and select the dist/ directory
    • Pin the extension for easy access

Basic Usage#

Speed Control

  • Click the extension icon to open the popup
  • Use the slider to set any speed from 0.1x to 4x
  • Click preset buttons for quick access to common speeds
  • Add custom speeds to your preset list

Automation Rules

  1. Go to the "Automation" tab in the popup
  2. Click "Add rule"
  3. Choose rule type (channel, title, or URL)
  4. Enter the pattern (e.g., "veritasium" for channel)
  5. Set the desired speed
  6. Save the rule

Profiles

  1. Navigate to the "Profiles" tab
  2. Click "Add profile"
  3. Set a name and default speed
  4. Add your preferred presets
  5. Switch between profiles as needed

Advanced Features#

Cross-Browser Compatibility#

The extension is designed to work on both Chrome and Firefox:

  • Chrome: Uses service workers for background processing
  • Firefox: Falls back to event pages for compatibility
  • Automatic feature detection and fallbacks

Settings Persistence#

All your settings are automatically saved and synced:

  • Custom presets and profiles
  • Automation rules
  • Theme settings (light/dark/system)

Real-World Use Cases#

For Students#

  • Speed up slow lectures to 1.5x or 2x
  • Slow down complex explanations to 0.75x
  • Create study profiles for different subjects
  • Use automation for educational channels

For Content Creators#

  • Review your own videos at different speeds
  • Analyze competitor content efficiently
  • Use reverse playback for effect creation
  • Maintain consistent viewing speeds across channels

For Professionals#

  • Quickly consume industry content
  • Create work-specific profiles
  • Automate speed settings for regular channels
  • Optimize learning time with custom presets

For Entertainment#

  • Speed up slow-paced content
  • Slow down action scenes for detail
  • Create personalized viewing experiences
  • Switch between profiles for different content types

Technical Architecture#

The extension is built with modern web technologies:

  • TypeScript: Type-safe code with excellent developer experience
  • React: Modern UI components with hooks and functional components
  • Tailwind CSS: Utility-first styling for consistent design
  • Chrome Extension APIs: Manifest V3 with service workers
  • Vite: Fast build tooling for development and production

Troubleshooting Common Issues#

Extension Won't Load#

  • Ensure you're using the dist/ folder after building
  • Check that all dependencies are installed
  • Verify Chrome extension permissions

Speed Changes Not Applying#

  • Refresh the YouTube page
  • Check the browser console for errors
  • Ensure the extension is pinned and active

Badge Not Showing#

  • Open a YouTube video (badge only shows on YouTube pages)
  • Change speed to trigger an update
  • Check if the extension is properly loaded

Contributing and Development#

The project is open source and welcomes contributions:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests: pnpm run lint && pnpm run typecheck && pnpm run build
  5. Submit a pull request

Development Commands#

bash
pnpm run dev       # Watch mode with auto-rebuild
pnpm run build     # Production build
pnpm run lint      # Code quality checks
pnpm run typecheck # TypeScript validation

YouTube Playback Controller transforms how you interact with YouTube content. Whether you're a student trying to optimize study time, a professional consuming industry content, or just someone who wants more control over their viewing experience, this extension provides the tools you need.

The combination of precise speed control, intelligent automation, and thoughtful user experience design makes it stand out from basic speed control extensions. The ability to create profiles, set automation rules, and even play videos backwards opens up entirely new ways to consume video content.

Give it a try, and you'll wonder how you ever watched YouTube without it!

Source: faeztgh/Youtube-playback-speed-extention

#on this page

  • What is YouTube Playback Controller?
  • Key Features That Set It Apart
  • 1. Intelligent Speed Synchronization
  • 2. Advanced Automation System
  • 3. Custom Presets and Profiles
  • 4. Reverse Playback (Yes, Really!)
  • 5. Smart Badge System
  • How to Install and Use
  • Installation
  • Basic Usage
  • Advanced Features
  • Cross-Browser Compatibility
  • Settings Persistence
  • Real-World Use Cases
  • For Students
  • For Content Creators
  • For Professionals
  • For Entertainment
  • Technical Architecture
  • Troubleshooting Common Issues
  • Extension Won't Load
  • Speed Changes Not Applying
  • Badge Not Showing
  • Contributing and Development
  • Development Commands
useEffect vs useLayoutEffect olderCore Web Vitals in 2026: LCP, INP, and CLSnewer

# related-posts

3 more
  • 01
    Streaming AI Chat in Next.js with the AI SDKJun 14, 2026·5 min
  • 02
    Getting Structured Output From LLMs Without the GuessworkJul 7, 2026·5 min
  • 03
    Model Context Protocol (MCP), Explained for Web DevelopersJun 28, 2026·6 min