Browser extensions, userscripts, and userstyles to make Youtube / Twitter less distracting
Userstyles
Requires a browser extension such as Stylus (GitHub, Chrome, Firefox)
(The Microsoft Edge Add-on named “Stylus” is by a different developer; use caution)
Youtube hide algorithmic suggestions
Note: if YouTube changes its DOM element names, then the renamed elements will no longer be hidden unless you update this userstyle correspondingly.
Userstyle: Youtube hide algorithmic suggestions
@-moz-document domain("youtube.com″) {
/* Comment out any elements you want to keep; the line to blank out subscriptions page is commented out by default */
/* PLAYER OVERLAYS */
.ytp-ce-element,
.ytp-paid-content-overlay,
.iv-promo,
.ytp-pause-overlay,
.ytp-suggestion-set,
ytd-horizontal-card-list-renderer,
.ytp-fullscreen-grid-stills-container,
.ytp-endscreen-next,
.ytp-endscreen-previous,
.ytp-endscreen-content,
.ytd-compact-autoplay-renderer,
/* WATCH PAGE SIDEBAR */
.ytd-watch-next-secondary-results-renderer,
/* HOME PAGE—blank out*/
[page-subtype=”home”],
/* SUBSCRIPTIONS PAGE—blank out (inactive)*/
/*[page-subtype=”subscriptions”],*/
/* SEARCH PAGE — hide “recommended” / “for you” shelves but keep organic results */
ytd-search ytd-shelf-renderer,
/* Shorts shelf (appears on home, search, sidebar) */
grid-shelf-view-model,
/* Chip cloud (Topic filter bar) */
yt-chip-cloud-renderer
{
display: none !important;
}
}Twitter hide sidebar
https://userstyles.world/style/752/minimal-twitter-uncropped
Userscripts
Requires a browser extension such as Tampermonkey
Youtube redirect shorts to normal video page
Why? Youtube shorts pages encourage scrolling and watching many shorts videos. Normal Youtube watch pages don’t, especially if algorithmic suggestions are hidden.
Userscript: Youtube redirect shorts to normal video page
// ==UserScript==
// @name Youtube redirect shorts to normal video page
// @description Redirect youtube.com/shorts to youtube.com/watch?v=
// @version 0.1
// @match https://www.youtube.com/shorts/*
// @run-at document-start
// ==/UserScript==
let normalYoutube = window.location.href.replace(”/shorts/”, ”/watch?v=”);
window.location.replace(normalYoutube);Youtube disable playlist auto-advance
If you want to advance to the next video, you need to click on it. Not automatic ⟶ slightly more friction ⟶ slightly harder to get sucked in
Userscript: Youtube disable playlist auto-advance
// ==UserScript==
// @name Youtube disable playlist auto-advance
// @description Pause 1.5 s before video end to prevent playlist auto-advance
// @version 0.1
// @match https://www.youtube.com/watch?*&list=*
// @run-at document-idle
// ==/UserScript==
(function() {
‘use strict’;
const PAUSE_BEFORE_END = 1.5; // seconds — needs to be at least 0.25 + YouTube’s auto-advance window
// --- Pause near the end using timeupdate (fires ~4/sec) ---
document.addEventListener(‘timeupdate’, function(e) {
if (e.target.tagName !== ‘VIDEO’) return;
const video = e.target;
const timeRemaining = video.duration—video.currentTime;
if (timeRemaining > 0 && timeRemaining ⇐ PAUSE_BEFORE_END && !video.paused) {
video.pause();
}
}, true);
})();Browser extensions
Stylus, for userstyles (GitHub, Chrome, Firefox)
(The Microsoft Edge Add-on named “Stylus” is by a different developer; use caution)
Tampermonkey, for userscripts (Website)
Bonus
Focused YouTube (duplicates “Youtube hide algorithmic suggestions” userstyle above, but the extension developer could update Youtube DOM element names if / when Youtube changes them)
uBlock Origin (GitHub, Chrome, Firefox) - block Youtube injected ad segments
SponsorBlock—on Youtube, crowdsource sponsored video segments and labels and optionally skips them
DeArrow—on Youtube, crowdsource less clickbaity video titles and thumbnails
Sure! Focused YouTube is equivalent to my “Youtube hide algorithmic suggestions” userstyle. If that’s all you need, then you don’t need to write your own custom CSS / script.