Turn Off Youtube Annotations Using JavaScript

Question

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.

Answer 1

Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.

var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created

var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
  if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
    all_labels[i].click(); // and in that case, click it
  }
}

Answer 2

User's code is correct, settings need to be click & then:

document.querySelectorAll("div[role='menuitemcheckbox']")[1].click() 

I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0

---

Previously working JS:

document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()

Answer 3

I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem. Extension gives us the power to use a background script through which we can inject css and javascript to opened web page. I made one extension on this https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken This also has a stop-start button for which I just inject the opposite code as before. If you need any further help on this, i will be happy to do so.

Answer 4

iv_load_policy (supported players: AS3, AS2, HTML5) Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.

Answer 5

Here is a nice solution, just hide the div with annotations

$("div.video-annotations").css("display", "none");