☰

Custom YouTube Interface

Customize YouTube interface by hiding certain elements and making modifications.

  1. // ==UserScript==
  2. // @name         Custom YouTube Interface
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Customize YouTube interface by hiding certain elements and making modifications.
  6. // @author       You
  7. // @match        *://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // CSS to hide certain elements and apply custom styles
  15.     GM_addStyle(`
  16.         /* Hide Like and Dislike buttons */
  17.         ytd-toggle-button-renderer.style-scope.ytd-video-primary-info-renderer {
  18.             display: none !important;
  19.         }
  20.  
  21.         /* Hide Download and Save buttons */
  22.         ytd-menu-renderer.style-scope.ytd-video-primary-info-renderer ytd-menu-popup-renderer {
  23.             display: none !important;
  24.         }
  25.  
  26.         /* Hide Description */
  27.         #description {
  28.             display: none !important;
  29.         }
  30.  
  31.         /* Hide Comments */
  32.         #comments {
  33.             display: none !important;
  34.         }
  35.  
  36.         /* Hide Shorts */
  37.         ytd-rich-grid-media[is-shorts] {
  38.             display: none !important;
  39.         }
  40.  
  41.         /* Make video list on watch page bigger */
  42.         ytd-playlist-video-list-renderer {
  43.             width: 100% !important;
  44.         }
  45.  
  46.         /* Replace logo with back button */
  47.         #logo {
  48.             display: none !important;
  49.         }
  50.  
  51.         #back-button {
  52.             position: absolute;
  53.             top: 10px;
  54.             left: 10px;
  55.             background: #fff;
  56.             border: 1px solid #ccc;
  57.             padding: 5px;
  58.             cursor: pointer;
  59.         }
  60.  
  61.         #back-button:hover {
  62.             background: #f0f0f0;
  63.         }
  64.  
  65.         /* Adjust Search bar to be an icon */
  66.         #search {
  67.             display: none !important;
  68.         }
  69.  
  70.         #search-icon {
  71.             position: absolute;
  72.             top: 10px;
  73.             right: 10px;
  74.             background: url('path_to_icon_image') no-repeat center;
  75.             width: 24px;
  76.             height: 24px;
  77.             cursor: pointer;
  78.         }
  79.     `);
  80.  
  81.     // JavaScript to create a back button
  82.     const backButton = document.createElement('div');
  83.     backButton.id = 'back-button';
  84.     backButton.textContent = 'Back'; // You can change this text or use an icon
  85.     document.body.appendChild(backButton);
  86.     backButton.addEventListener('click', () => window.history.back());
  87.  
  88.     // JavaScript to create a search icon
  89.     const searchIcon = document.createElement('div');
  90.     searchIcon.id = 'search-icon';
  91.     document.body.appendChild(searchIcon);
  92.     searchIcon.addEventListener('click', () => {
  93.         const searchField = document.querySelector('input#search');
  94.         if (searchField) {
  95.             searchField.focus();
  96.         }
  97.     });
  98.  
  99. })();