[Deprecated] Automatically load all videos in a YouTube channel using JavaScript

Issue: How can I use JavaScript to click the Load More button on a YouTube channel automatically?

This issue is rather a proof-of-concept and result of my curiosity than a real useful hint. As I was watching a YouTube channel, going back and forth, I found it incredibly hard to manage my progress in the channels’ huge library (over 1200 videos). Every time I started up my browser and visited the channel, I had to re-click that Load More button quite a few times. Thus the idea was born to click that button automatically using JavaScript.

Prerequisites

We’re going to use the built-in developer tools in the major browsers. I was using Firefox in this example. To manipulate the view of the channel, we’re going to inject some handcrafted JavaScript into the webpage. Open up the YouTube channel and fire up your dev tools (usually by hitting F12).

Step 1 – Selecting the selector

To execute a click on a button, we’re going to use a rather simple JavaScript method. As this button neither features an id– nor a name-tag, we’re going to work around by using a CSS-selector class-tag. In your browsers’ dev tools, open the view of the markup language, usually called Inspector. Navigate to the declaration of said button. You may use the element finder for this. Right-click the button-tag and choose to copy the unique selector. This should copy .load-more-button into your clipboard, the class we can use to identify the button in our JavaScript.

Step 2 – Crafting the JavaScript

The extracted selector may now be used in JavaScript to simulate a click on this element. For this we’re going to select the element und execute a click using the following snippet:

document.querySelector('.load-more-button').click();

Copy this line of code, paste it into the Console in your browsers dev tools and hit Enter. The click event should now be fired and one iteration of videos should be loaded. Well done! Instead of clicking a single button, we complicated things – pasting code into a console and executing a script. To have a real benefit we need an automation – and this is where things get interesting.

When the button is clicked (by mouse or script), the element changes. The Load More label changes to something like loading more… and the button appears disabled. In this moment an Ajax-call is sent to retrieve the next few videos. So it’s not possible to introduce a while-loop or similar concepts to spam the button click (but feel free to try this – your browser will most likely notify you a script is going rogue). Because of this limitation we’re going to add a timeout. After a click event is fired we will wait a short amount of time until we start clicking the button again. This will be done using recursion (calling the method from inside the method).

Lastly we want a check if there aren’t anymore videos to load (the button is gone) and we’re done. A simple check if the query returns null is sufficient. The finalized script looks like this:

function loadMore() {
    if(document.querySelector('.load-more-button') != null){
            document.querySelector('.load-more-button').click();    
            setTimeout(function(){loadMore()}, 500);
    } else {
        console.log("Done loading all content!")
    }
}

loadMore();

Copy this script and paste it into your browsers developer tools Console. After hitting Enter new videos should be retrieved. When the script is done it prints a short message on the console. You might want to switch this to an JavaScript alert, or disregard it at all – you can close the console once the script is fired.