DEV Community

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

Posted on

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.

Discussion (0)