I don’t know why it took me so long to remove some elements on YouTube webpages, when I already tried to block channel trailers from automatic playing and am still having issue with YouTube awfully designed recommendations, especially the recommendation loop.

Originally, when I finally started to tackle this for real, I was paying attention to AdBlock Plus’ Element hiding feature. It’s visually invisible using the following filter:


youtube.com##div.branded-page-related-channels

However, it doesn’t prevent resources from being loaded, in this case, 10 channel icon images. It’s okay to say that although bandwidth is still wasted, but clutters are gone.

Of course, I was not satisfied with that result, therefore I turned to Pentadactyl for help, and I have the following code to remove:

  1. Recommended channels on My Subscriptions
  2. Channel trailers on YouTube channel pages
  3. Related videos on video page

" clean up YouTube clutters
:js <<EOF
clean_yt = function (d) {
  [
    'div.branded-page-related-channels',
    '#upsell-video',
    '#watch-related'
  ].forEach(function (sel) {
    let e = d.querySelector(sel);
    if (e)
      e.parentNode.removeChild(e);
  });
}
EOF
au DOMLoad youtube.com js clean_yt(<doc>)

The images don’t load anymore, the trailers don’t play, a little closer to the perfection.