YouTube Classic

Lightweight YouTube for Old PCs.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Advertisement:

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

Advertisement:

// ==UserScript==
// @name         YouTube Classic
// @namespace    Violentmonkey Scripts
// @version      1.0
// @description  Lightweight YouTube for Old PCs.
// @author       smoochie
// @match        https://www.youtube.com/*
// @match        https://youtube.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at       document-start
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const _isTypeSupported = MediaSource.isTypeSupported.bind(MediaSource);
  MediaSource.isTypeSupported = function (type) {
    if (/vp9|vp09|av01|av1/i.test(type)) return false;
    return _isTypeSupported(type);
  };

  const CSS = `

    ytd-topbar-logo-renderer, a#logo { display: none !important; }


    ytd-searchbox { border: none !important; box-shadow: none !important; }
    ytd-searchbox input#search,
    ytd-searchbox #search-input input {
      background: #fff !important; color: #111 !important;
      border: 1px solid #aaa !important; border-right: none !important;
      border-radius: 0 !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.12) !important;
    }
    ytd-searchbox input#search::placeholder { color: #888 !important; }
    ytd-searchbox #search-icon-legacy, #search-icon-legacy button {
      border: 1px solid #aaa !important; border-left: none !important;
      border-radius: 0 !important; box-shadow: none !important;
    }


    #guide-inner-content, ytd-guide-renderer #items, tp-yt-app-drawer #contentContainer {border-right: 1px solid #dedede !important;}
    ytd-guide-entry-renderer { border-radius: 0 !important; }
    ytd-guide-entry-renderer[active] yt-formatted-string {color: #C62828 !important;}


    ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 4 !important;
      --ytd-rich-grid-slim-items-per-row: 4 !important;
      --ytd-rich-grid-posts-per-row: 4 !important;
    }
    ytd-rich-grid-renderer > #contents > ytd-rich-item-renderer {
      width: calc(25% - 16px) !important;
      max-width: calc(25% - 16px) !important;
      min-width: 0 !important;
    }


    ytd-rich-item-renderer, ytd-video-renderer,
    ytd-compact-video-renderer, ytd-rich-grid-media {
      border: none !important;
      box-shadow: none !important; transition: none !important; animation: none !important;
    }
    ytd-rich-item-renderer { margin: 4px 2px !important; }


    #video-title, a#video-title, h3 a#video-title,
    ytd-rich-grid-media #video-title, ytd-video-renderer #video-title,
    ytd-compact-video-renderer #video-title {
      color: #1155cc !important; font-weight: bold !important;
      font-size: 13px !important; text-decoration: none !important;
    }
    #video-title:hover { color: #cc0000 !important; text-decoration: underline !important; }


    #metadata-line span, ytd-video-meta-block, .ytd-video-meta-block,
    #metadata, ytd-rich-item-renderer ytd-video-meta-block {
      color: #666 !important; font-size: 11px !important;
    }


    ytd-channel-name a, #channel-name a, .ytd-channel-name a {
      color: #C62828 !important; text-decoration: none !important;
    }
    ytd-channel-name a:hover { color: #cc0000 !important; }


    h1.ytd-watch-metadata, ytd-watch-metadata h1 yt-formatted-string {
      font-size: 18px !important; font-weight: bold !important; color: #0f0f0f !important;
    }


    like-button-view-model button, dislike-button-view-model button,
    segmented-like-dislike-button-view-model button {
      border-radius: 0 !important;
    }


    #subscribe-button button, ytd-subscribe-button-renderer button {
      background: #cc0000 !important; color: #fff !important;
      border: none !important; border-radius: 0 !important;
      font-weight: bold !important; font-size: 13px !important; padding: 6px 14px !important;
    }
    #subscribe-button button:hover,
    ytd-subscribe-button-renderer button:hover { background: #aa0000 !important; }


    ytd-text-inline-expander, #description-inner,
    ytd-expandable-video-description-body-renderer {
      padding: 10px !important;
      font-size: 13px !important; border-radius: 0 !important;
    }


    ytd-compact-video-renderer {
      border-bottom: 1px solid #eee !important;
    }


    ytd-thumbnail-overlay-time-status-renderer span {
      background: rgba(0,0,0,.82) !important; color: #fff !important;
      font-size: 11px !important; border-radius: 0 !important;
    }


    ytd-comment-thread-renderer {
      border-bottom: 1px solid #eee !important;
    }
    ytd-comment-renderer #author-text a {
      color: #1155cc !important; font-weight: bold !important;
    }
    ytd-comment-renderer #content-text { color: #333 !important; font-size: 13px !important; }
    #comments { display: none !important; }


    #ytc-show-comments {
      display: block; margin: 12px 0 0;
      padding: 7px 16px; background: #f0f0f0; color: #333;
      border: 1px solid #ccc; border-radius: 0;
      font: 12px Arial, sans-serif; cursor: pointer;
    }
    #ytc-show-comments:hover { background: #e0e0e0; border-color: #999; }


    ytd-app *:not([class^="ytp-"]):not([class*=" ytp-"]) { border-radius: 0 !important; }


    .ytp-chrome-controls, .ytp-gradient-bottom, .ytp-gradient-top,
    .ytp-tooltip, .ytp-popup, .ytp-settings-menu, .ytp-panel,
    .ytp-ce-element, .ytp-button, .ytp-progress-bar-container,
    .ytp-volume-panel, .ytp-time-display, .ytp-menuitem,
    .ytp-cards-button, .ytp-subtitles-button, .ytp-settings-button,
    .ytp-miniplayer-button, .ytp-size-button,
    .ytp-play-button, .ytp-mute-button {
      border-radius: 12px !important;
    }


    #movie_player, .html5-video-player, .html5-main-video, video {
      border-radius: 0 !important;
    }


    ytd-reel-shelf-renderer, ytd-rich-shelf-renderer[is-shorts],
    ytd-shorts, [page-subtype="shorts"],
    ytd-guide-entry-renderer:has(a[href="/shorts"]),
    ytd-mini-guide-entry-renderer:has(a[href="/shorts"]),
    ytd-pivot-bar-item-renderer:has(a[href="/shorts"]),
    tp-yt-paper-tab:has(a[href="/shorts"]),
    ytd-rich-section-renderer:has(ytd-reel-shelf-renderer),
    ytd-rich-item-renderer:has(a[href*="/shorts/"]),
    ytd-video-renderer:has(a[href*="/shorts/"]),
    ytd-compact-video-renderer:has(a[href*="/shorts/"]),
    #endpoint[href="/shorts"],
    .ytp-ambilight-container, .ytp-ambilight, .ytp-ambilight-col,
    #cinematics, ytd-cinematics, ytd-cinematic-container,
    #chat, ytd-live-chat-frame, yt-live-chat-app, #chat-container,
    ytd-backstage-post-thread-renderer, ytd-backstage-post-renderer,
    ytd-rich-section-renderer:has(ytd-backstage-post-renderer),
    #sponsor-button, #super-thanks-button, ytd-merch-shelf-renderer,
    ytd-creator-heart-button-renderer,
    yt-button-shape[aria-label*="Sponsor"],
    yt-button-shape[aria-label*="Join"],
    yt-button-shape[aria-label*="Thanks"],
    yt-button-shape[aria-label*="Спонсор"],
    yt-button-shape[aria-label*="подяк"],
    ytd-video-preview, ytd-video-preview-loader, #preview, .ytd-video-preview,
    #mouseover-overlay, animated-thumbnail-overlay-view-model,
    .ytd-thumbnail-overlay-loading-preview-renderer,
    .ytp-inline-preview-ui,
    yt-chip-cloud-chip-renderer, ytd-feed-filter-chip-bar-renderer,
    ytd-guide-entry-renderer a[href="/feed/explore"],
    ytd-guide-entry-renderer a[href*="premium"],
    ytd-guide-entry-renderer a[href*="youtubepremium"],
    ytd-guide-entry-renderer a[title*="Music"],
    ytd-mini-guide-entry-renderer a[href="/feed/explore"],
    ytd-ghost-card-renderer, .ytd-ghost-card-renderer,
    yt-formatted-string emoji-span { display: none !important; }

    ytd-menu-popup-renderer tp-yt-paper-item { border-radius: 0 !important; }
  `;

  const style = document.createElement('style');
  style.textContent = CSS;
  const insertStyle = () => (document.head || document.documentElement).appendChild(style);
  document.head ? insertStyle() : document.addEventListener('DOMContentLoaded', insertStyle, { once: true });

  const REMOVE_SEL = [
    'ytd-reel-shelf-renderer', 'ytd-shorts', '[page-subtype="shorts"]',
    'ytd-rich-section-renderer:has(ytd-reel-shelf-renderer)',
    'ytd-rich-item-renderer:has(a[href*="/shorts/"])',
    'ytd-video-renderer:has(a[href*="/shorts/"])',
    'ytd-guide-entry-renderer:has(a[href="/shorts"])',
    'ytd-mini-guide-entry-renderer:has(a[href="/shorts"])',
    'ytd-pivot-bar-item-renderer:has(a[href="/shorts"])',
    'ytd-pivot-bar-item-renderer:has(a[href="/feed/you"])',
    'ytd-guide-entry-renderer:has(a[href="/feed/you"])',
    '#chat', 'ytd-live-chat-frame',
    '.ytp-ambilight-container', '#cinematics', 'ytd-cinematics',
    'ytd-backstage-post-thread-renderer', 'ytd-video-preview',
    '#sponsor-button', '#super-thanks-button',
  ].join(',');

  const hide = el => el.style.setProperty('display', 'none', 'important');

  let removeTimer = null;
  let commentsVisible = false;
  let commentBtnInjected = false;
  let feedLimitActive = false;

  function tick() {
    try { document.querySelectorAll(REMOVE_SEL).forEach(hide); } catch (_) {}
    disableAmbient();
    injectCommentBtn();
    enforceGrid();
    cleanSidebar();
    limitFeed();
  }

  const schedTick = () => { clearTimeout(removeTimer); removeTimer = setTimeout(tick, 200); };

  document.addEventListener('DOMContentLoaded', () => {
    new MutationObserver(schedTick).observe(document.body, { childList: true, subtree: true });
    tick();
  });

  function disableAmbient() {
    try {
      const p = document.getElementById('movie_player');
      if (p && typeof p.setAmbientMode === 'function') p.setAmbientMode(false);
    } catch (_) {}
    try {
      if (window.yt?.config_) {
        window.yt.config_['AMBIENT_MODE_ENABLED'] = false;
        window.yt.config_['CINEMATIC_ENABLED'] = false;
      }
    } catch (_) {}
  }


  function injectCommentBtn() {
    if (commentBtnInjected || !location.pathname.startsWith('/watch')) return;
    const comments = document.getElementById('comments');
    if (!comments || document.getElementById('ytc-show-comments')) return;
    const btn = document.createElement('button');
    btn.id = 'ytc-show-comments';
    btn.textContent = '▼ Show comments';
    btn.onclick = () => {
      commentsVisible = true;
      comments.style.setProperty('display', 'block', 'important');
      btn.remove();
    };
    comments.before(btn);
    commentBtnInjected = true;
  }


  function enforceGrid() {
    const grid = document.querySelector('ytd-rich-grid-renderer');
    if (!grid) return;
    grid.style.setProperty('--ytd-rich-grid-items-per-row', '4', 'important');
    grid.style.setProperty('--ytd-rich-grid-slim-items-per-row', '4', 'important');
    try { if (grid.hasAttribute('is-slim-media')) grid.removeAttribute('is-slim-media'); } catch (_) {}
  }


  const KEEP_HREFS = new Set(['/', '/feed/subscriptions', '/feed/library', '/feed/history']);

  function cleanSidebar() {
    document.querySelectorAll('ytd-guide-renderer ytd-guide-entry-renderer, ytd-guide-renderer ytd-guide-section-renderer').forEach(el => {
      if (el.tagName.toLowerCase() === 'ytd-guide-section-renderer') {
        if (!Array.from(el.querySelectorAll('a')).some(a => KEEP_HREFS.has(a.getAttribute('href')))) hide(el);
        return;
      }
      const href = el.querySelector('a')?.getAttribute('href') || '';
      if (KEEP_HREFS.has(href) || /^\/@|^\/channel\/|^\/user\//i.test(href)) return;
      const title = el.closest('ytd-guide-section-renderer')
        ?.querySelector('#guide-section-title, #section-title')?.textContent || '';
      if (/підписк|subscript/i.test(title)) return;
      hide(el);
    });

    document.querySelectorAll('ytd-mini-guide-renderer ytd-mini-guide-entry-renderer').forEach(el => {
      const href = el.querySelector('a')?.getAttribute('href') || '';
      if (!KEEP_HREFS.has(href)) hide(el);
    });
  }


  const MAX_ITEMS = 60;

  function limitFeed() {
    if (feedLimitActive) return;
    if (!location.pathname.startsWith('/') && !location.pathname.startsWith('/feed')) return;
    const grid = document.querySelector('ytd-rich-grid-renderer');
    if (!grid || grid.querySelectorAll('ytd-rich-item-renderer').length < MAX_ITEMS) return;
    feedLimitActive = true;
    grid.querySelectorAll('ytd-continuation-item-renderer').forEach(hide);
    if (document.getElementById('ytc-load-more')) return;
    const btn = document.createElement('button');
    btn.id = 'ytc-load-more';
    btn.textContent = '↓ Load more videos';
    Object.assign(btn.style, {
      display: 'block', margin: '20px auto', padding: '8px 24px',
      background: '#f0f0f0', color: '#333', border: '1px solid #ccc',
      borderRadius: '0', font: '13px Arial,sans-serif', cursor: 'pointer',
    });
    btn.onclick = () => {
      grid.querySelectorAll('ytd-continuation-item-renderer').forEach(el => el.style.removeProperty('display'));
      feedLimitActive = false;
      btn.remove();
    };
    grid.after(btn);
  }


  document.addEventListener('mouseover', e => {
    const thumb = e.target.closest('ytd-thumbnail');
    if (!thumb) return;
    const video = thumb.querySelector('video');
    if (video) { video.pause(); video.src = ''; video.load(); }

  }, true);


  window.addEventListener('yt-navigate-start', () => {
    commentBtnInjected = false;
    commentsVisible = false;
    feedLimitActive = false;
    document.getElementById('ytc-load-more')?.remove();
    document.getElementById('ytc-show-comments')?.remove();
  });

  window.addEventListener('yt-page-data-updated', schedTick);

  console.log('Youtube Classic Works');
})();