javascriptyoutube

Turn Off Youtube Annotations Using JavaScript


There’re currently three ways I know of, to disable annotations in youtube videos:

  1. You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
  2. You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
  3. You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).

Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.

I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.


Solution

  • Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date.

    // Open and close settings, so annotations label is created
    const settingsButton = document.querySelector(".ytp-settings-button")
    settingsButton.click()
    settingsButton.click()
    
    // Click annotations label if active
    Array.from(document.querySelectorAll(".ytp-menuitem-label")).find(div => div.innerHTML === "Annotations" && div.parentNode.ariaChecked === "true")?.click()