YouTube Classic

Lightweight YouTube for Old PCs.

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

Advertisement:

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

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');
})();