DEV Community

Cover image for Increase YouTube video playback rate up to 2x
Douglas Moura
Douglas Moura

Posted on • Edited on • Originally published at douglasmoura.dev

1 1

Increase YouTube video playback rate up to 2x

YouTube videos (along with all modern video implementations on the web) uses the HTML5 video element. This new media tag implements the HTMLMediaElement API, which gives a plenty of media-related methods common to audio and video.

The standard YouTube player just allow us to increase video speed up to 2x, but, if you want to increase it even more? Well, there's a solution for that: just set the playback rate to whatever number you want!

In order to do that, you need to select the <video> element in the page and change its playback rate to the desired speed:

document.getElementsByTagName('video')[0].playbackRate = 2.5;
Enter fullscreen mode Exit fullscreen mode

It's a good solution, but not a practical one. Gracefully, there's a better way to make use of this functionality without having to open the console of your browser.

JavaScript bookmarklet

Adding the bookmarklet on Firefox



Adding the bookmarklet on Firefox

If you want to have this script always at hand, the best way is to put it inside a JavaScript bookmarklet. Just create a new bookmark in you favorite browser and add the code below:

javascript:(function() {
  const rate = prompt('Set the new playback rate', 2.5);
  if (rate != null) {
    const video = document.getElementsByTagName('video')[0];
    video.playbackRate = parseFloat(rate);
  }
})();
Enter fullscreen mode Exit fullscreen mode

And here is an screenshot of the bookmarklet working:

Video speed bookmarklet working



Changing the speed of an (awesome) YouTube video

Feel free to contribute with this code in my public gist.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay