szepeviktor/youtube-cleaner.js

Last active January 23, 2023 12:21

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/szepeviktor/4639d8212cd6deaf260157dbe6b8fdb8.js"></script>
Save szepeviktor/4639d8212cd6deaf260157dbe6b8fdb8 to your computer and use it in GitHub Desktop.

Download ZIP

Remove everything from a YouTube video except the video itself

Raw

youtube-cleaner.js

document.querySelectorAll("#masthead, #columns, .ytp-chrome-bottom, .ytp-gradient-top, .ytp-gradient-bottom, .ytp-ce-element, ytd-miniplayer, svg, input, button, iframe, script").forEach(element => element.remove());

Author

szepeviktor commented Jan 18, 2023 •

edited

The same for Twitch

document.querySelectorAll("#channel-player, .top-bar, .top-nav, .side-nav, .simplebar-track, .right-column, .channel-info-content, .extensions-dock__layout, svg, input, iframe, script").forEach(element => element.remove());

Author

szepeviktor commented Jan 19, 2023

YouTube Solarized document.getElementById("ext-styles").innerHTML = "";

html:not([style-scope]):not(.style-scope):not([color-exp]) *,
html[color-exp]:not([style-scope]):not(.style-scope) {
    --solarized-base03: #002b36;
    --solarized-base02: #073642;
    --solarized-base01: #586e75;
    --solarized-base00: #657b83;
    --solarized-base0: #839496;
    --solarized-base1: #93a1a1;
    --solarized-base2: #eee8d5;
    --solarized-base3: #fdf6e3;
    --solarized-yellow: #b58900;
    --solarized-orange: #cb4b16;
    --solarized-red: #dc322f;
    --solarized-magenta: #d33682;
    --solarized-violet: #6c71c4;
    --solarized-blue: #268bd2;
    --solarized-cyan: #2aa198;
    --solarized-green: #859900;
    --chrome-blue: #1a355b;
    --yt-spec-base-background: var(--solarized-base03);
    --yt-spec-menu-background: var(--solarized-base02);
    --yt-spec-additive-background: rgba(255, 255, 255, 0.1);
    --yt-spec-outline: rgba(255, 255, 255, 0.2);
    --yt-spec-shadow: rgba(0, 0, 0, 0.25);
    --yt-spec-brand-background-solid: var(--solarized-base02);
    --yt-spec-brand-background-primary: var(--solarized-base03);
    --yt-spec-brand-background-secondary: rgba(33, 33, 33, 0.95);
    --yt-spec-general-background-a: var(--solarized-base01);
    --yt-spec-general-background-b: var(--solarized-base01);
    --yt-spec-text-primary: var(--solarized-base3);
    --yt-spec-text-secondary: var(--solarized-base2);
    --yt-spec-text-disabled: var(--solarized-base1);
    --yt-spec-text-primary-inverse: var(--solarized-base01);
    --yt-spec-call-to-action: var(--solarized-base1);
    --yt-spec-suggested-action: rgba(255, 255, 255, 0.1);
    --yt-spec-suggested-action-inverse: var(--solarized-base3);
    --yt-spec-icon-active-other: var(--solarized-base3);
    --yt-spec-icon-inactive: var(--solarized-base1);
    --yt-spec-icon-disabled: var(--solarized-base1);
    --yt-spec-badge-chip-background: rgba(255, 255, 255, 0.1);
    --yt-spec-verified-badge-background: rgba(255, 255, 255, 0.25);
    --yt-spec-button-chip-background-hover: rgba(255, 255, 255, 0.2);
    --yt-spec-touch-response: var(--solarized-base1);
    --yt-spec-brand-icon-active: var(--solarized-base3);
    --yt-spec-brand-icon-inactive: var(--solarized-base2);
    --yt-spec-wordmark-text: var(--solarized-base3);
    --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1);
    --yt-spec-themed-blue: var(--solarized-blue);
    --yt-spec-themed-green: var(--solarized-green);
    --yt-spec-themed-overlay-background: rgba(0, 0, 0, 0.8);
    --yt-spec-static-brand-red: var(--solarized-red);
    --yt-spec-static-brand-white: #fff;
    --yt-spec-static-brand-black: #212121;
    --yt-spec-static-clear-color: rgba(255, 255, 255, 0);
    --yt-spec-static-clear-black: rgba(0, 0, 0, 0);
    --yt-spec-static-ad-yellow: var(--solarized-yellow);
    --yt-spec-static-overlay-background-solid: var(--solarized-base03);
    --yt-spec-static-overlay-background-heavy: rgba(0, 0, 0, 0.8);
    --yt-spec-static-overlay-background-medium: rgba(0, 0, 0, 0.6);
    --yt-spec-static-overlay-background-medium-light: rgba(0, 0, 0, 0.3);
    --yt-spec-static-overlay-background-light: rgba(0, 0, 0, 0.1);
    --yt-spec-static-overlay-text-primary: var(--solarized-base2);
    --yt-spec-static-overlay-text-secondary: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-text-disabled: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-call-to-action: #fff;
    --yt-spec-static-overlay-icon-active-other: #fff;
    --yt-spec-static-overlay-icon-inactive: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-icon-disabled: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-button-primary: rgba(255, 255, 255, 0.3);
    --yt-spec-static-overlay-button-secondary: rgba(255, 255, 255, 0.1);
    --yt-spec-static-overlay-touch-response: #fff;
    --yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);
    --yt-spec-call-to-action-faded: rgba(62, 166, 255, 0.3);
    --yt-spec-brand-link-text-faded: rgba(255, 78, 69, 0.3);
    --yt-spec-filled-button-focus-outline: rgba(255, 255, 255, 0.7);
    --yt-spec-static-overlay-button-hover: rgba(255, 255, 255, 0.5);
    --yt-spec-mono-tonal-hover: rgba(255, 255, 255, 0.2);
    --yt-spec-static-overlay-tonal-hover: rgba(255, 255, 255, 0.2);
    --yt-spec-paper-tab-ink: rgba(255, 255, 255, 0.3);
    --ytd-searchbox-background: var(--solarized-base2);
    --ytd-searchbox-text-color: var(--solarized-base02);
}

html,
html[dark],
.html5-video-player {
    background-color: var(--solarized-base03) !important;
}

/*
 * Prevents a black box behind video play
 * The div includes canvas, which might be the culprit
 */
#cinematics {
    display: none;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment