YouTube Classic Interface Restoration

Restore YouTube's interface to match pre-update classic dimensions

  1. // ==UserScript==
  2. // @name YouTube Classic Interface Restoration
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Restore YouTube's interface to match pre-update classic dimensions
  6. // @author DCS
  7. // @match https://www.youtube.com/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13.  
  14. // Add CSS to restore classic YouTube dimensions and styling
  15. const classicYouTubeCSS = `
  16. /* Restore classic header height */
  17. ytd-masthead {
  18. height: 56px !important;
  19. min-height: 56px !important;
  20. padding: 0 16px !important;
  21. }
  22.  
  23. /* Restore classic logo size */
  24. #masthead-logo {
  25. transform: none !important;
  26. }
  27.  
  28. /* Standard search bar width */
  29. ytd-searchbox {
  30. max-width: 640px !important;
  31. }
  32.  
  33. /* Fix thumbnail sizes to classic dimensions */
  34. ytd-rich-grid-media, ytd-thumbnail {
  35. transform: none !important;
  36. }
  37.  
  38. /* Restore 4 videos per row (classic YouTube standard) */
  39. ytd-rich-grid-renderer #contents {
  40. --ytd-rich-grid-items-per-row: 4 !important;
  41. }
  42.  
  43. /* Fix classic spacing in video grid */
  44. ytd-rich-grid-row #contents {
  45. gap: 16px !important;
  46. }
  47.  
  48. /* Restore original padding in grid items */
  49. ytd-rich-item-renderer {
  50. margin: 0 8px 24px 8px !important;
  51. padding: 0 !important;
  52. }
  53.  
  54. /* Fix video title styling */
  55. #video-title {
  56. margin: 12px 0 4px 0 !important;
  57. font-size: 14px !important;
  58. line-height: 20px !important;
  59. font-weight: 500 !important;
  60. max-height: 40px !important;
  61. overflow: hidden !important;
  62. }
  63.  
  64. /* Restore channel information styling */
  65. ytd-channel-name, #metadata-line {
  66. font-size: 13px !important;
  67. line-height: 18px !important;
  68. margin: 4px 0 !important;
  69. color: #606060 !important;
  70. }
  71.  
  72. /* Classic sidebar width */
  73. ytd-guide-renderer {
  74. width: 240px !important;
  75. overflow-x: hidden !important;
  76. }
  77.  
  78. /* Classic mini-guide width */
  79. ytd-mini-guide-renderer {
  80. width: 72px !important;
  81. }
  82.  
  83. ytd-guide-section-renderer {
  84. padding: 8px 0 !important;
  85. }
  86.  
  87. /* Restore classic sidebar item styling */
  88. ytd-guide-entry-renderer {
  89. height: 40px !important;
  90. padding: 0 !important;
  91. font-size: 14px !important;
  92. }
  93.  
  94. ytd-guide-entry-renderer tp-yt-paper-item {
  95. padding: 0 24px !important;
  96. min-height: 40px !important;
  97. }
  98.  
  99. /* Classic icon size in sidebar */
  100. ytd-guide-entry-renderer yt-icon {
  101. width: 24px !important;
  102. height: 24px !important;
  103. }
  104.  
  105. /* Restore classic search results spacing */
  106. ytd-item-section-renderer {
  107. padding: 20px 0 !important;
  108. }
  109.  
  110. /* Classic video player page layout */
  111. ytd-watch-flexy #primary {
  112. padding: 24px 24px 0 0 !important;
  113. max-width: 70% !important;
  114. }
  115.  
  116. ytd-watch-flexy #secondary {
  117. padding: 24px 0 0 0 !important;
  118. max-width: 30% !important;
  119. }
  120.  
  121. /* Classic player controls */
  122. .ytp-chrome-bottom {
  123. height: 40px !important;
  124. }
  125.  
  126. .ytp-chrome-controls {
  127. height: 40px !important;
  128. }
  129.  
  130. /* Classic comment section styling */
  131. ytd-comments {
  132. margin-top: 24px !important;
  133. font-size: 100% !important;
  134. }
  135.  
  136. ytd-comment-renderer {
  137. padding: 16px 0 !important;
  138. }
  139.  
  140. /* Classic chips/filters bar styling */
  141. yt-chip-cloud-renderer {
  142. --yt-chip-height: 32px !important;
  143. }
  144.  
  145. yt-chip-cloud-chip-renderer {
  146. height: 32px !important;
  147. margin: 8px 8px 8px 0 !important;
  148. }
  149.  
  150. /* Restore button sizing */
  151. yt-button-renderer, yt-formatted-string {
  152. font-size: 100% !important;
  153. }
  154.  
  155. /* Restore card styling */
  156. ytd-rich-section-renderer {
  157. margin: 24px 0 !important;
  158. transform: none !important;
  159. }
  160.  
  161. /* Classic description styling */
  162. #description-inline-expander {
  163. font-size: 100% !important;
  164. padding: 12px !important;
  165. }
  166.  
  167. /* Classic avatar size */
  168. yt-img-shadow, #avatar {
  169. width: 40px !important;
  170. height: 40px !important;
  171. }
  172.  
  173. /* Remove modern rounded corners */
  174. ytd-thumbnail, ytd-playlist-thumbnail, ytd-playlist-panel-video-renderer,
  175. ytd-rich-grid-slim-media, ytd-chip-cloud-chip-renderer, ytd-video-preview {
  176. border-radius: 0 !important;
  177. overflow: hidden;
  178. }
  179.  
  180. /* Remove modern shadow effects */
  181. ytd-rich-item-renderer, ytd-video-renderer, ytd-grid-video-renderer,
  182. ytd-compact-video-renderer, ytd-playlist-video-renderer {
  183. box-shadow: none !important;
  184. }
  185.  
  186. /* Fix popup menus */
  187. ytd-menu-popup-renderer {
  188. border-radius: 2px !important;
  189. }
  190.  
  191. /* Fix watch page layout */
  192. ytd-watch-flexy:not([theater]):not([fullscreen]) #primary.ytd-watch-flexy {
  193. max-width: calc(100% - 426px) !important;
  194. }
  195.  
  196. ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary.ytd-watch-flexy {
  197. max-width: 402px !important;
  198. }
  199.  
  200. /* Optional: Hide Shorts completely */
  201. /* Uncomment the following if you want to hide Shorts section
  202. ytd-guide-entry-renderer[ep-guide-item-type="TYPE_SHORTS"],
  203. ytd-mini-guide-entry-renderer[guide-item-type="TYPE_SHORTS"],
  204. ytd-rich-shelf-renderer[is-shorts],
  205. ytd-rich-section-renderer:has([is-shorts]),
  206. ytd-reel-shelf-renderer {
  207. display: none !important;
  208. }
  209. */
  210. `;
  211.  
  212. // Insert the CSS into the page
  213. const styleElement = document.createElement('style');
  214. styleElement.textContent = classicYouTubeCSS;
  215. document.head.appendChild(styleElement);
  216.  
  217. // Function to further adjust elements to match classic YouTube
  218. function applyClassicYouTubeAdjustments() {
  219. // Restore classic hover effects
  220. const thumbnails = document.querySelectorAll('ytd-thumbnail');
  221. thumbnails.forEach(thumbnail => {
  222. if (!thumbnail.hasAttribute('classic-style-applied')) {
  223. thumbnail.style.transition = 'opacity 0.1s cubic-bezier(0.4, 0, 1, 1)';
  224. thumbnail.setAttribute('classic-style-applied', 'true');
  225. }
  226. });
  227.  
  228. // Ensure classic layout for video page
  229. if (window.location.pathname === '/watch') {
  230. const videoContainer = document.querySelector('ytd-watch-flexy');
  231. if (videoContainer && !videoContainer.hasAttribute('classic-layout-applied')) {
  232. // Only apply once
  233. videoContainer.setAttribute('classic-layout-applied', 'true');
  234. }
  235. }
  236. }
  237.  
  238. // Apply immediately with a delay to ensure page elements are loaded
  239. setTimeout(applyClassicYouTubeAdjustments, 1000);
  240.  
  241. // Also apply on navigation and DOM changes (YouTube is a SPA)
  242. const observer = new MutationObserver(() => {
  243. setTimeout(applyClassicYouTubeAdjustments, 500);
  244. });
  245.  
  246. // Start observing the document for changes
  247. observer.observe(document.body, { childList: true, subtree: true });
  248.  
  249. // Add keyboard shortcut to toggle the script (Ctrl+Alt+Y)
  250. let isEnabled = true;
  251. document.addEventListener('keydown', function(e) {
  252. if (e.ctrlKey && e.altKey && e.code === 'KeyY') {
  253. isEnabled = !isEnabled;
  254. styleElement.disabled = !isEnabled;
  255. alert(isEnabled ? 'YouTube Classic Interface: Enabled' : 'YouTube Classic Interface: Disabled');
  256. }
  257. });
  258.  
  259. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址