☰

Sleazy Fork is available in English.

YouTube Custom Style and Layout

Customize YouTube's video player, subscribe button, and layout

As of 2024-08-27. See the latest version.

  1. // ==UserScript==
  2. // @name         YouTube Custom Style and Layout
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Customize YouTube's video player, subscribe button, and layout
  6. // @author       You
  7. // @match        *://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to add custom styles
  16.     function addCustomStyles() {
  17.         GM_addStyle(`
  18.             /* Make the video player smaller */
  19.             ytd-player {
  20.                 width: 80% !important;
  21.                 height: auto !important;
  22.                 max-width: 720px !important;
  23.             }
  24.  
  25.             /* Style the subscribe button */
  26.             #subscribe-button {
  27.                 background-color: red !important;
  28.                 text-transform: uppercase !important;
  29.                 color: white !important;
  30.                 border-radius: 3px;
  31.             }
  32.  
  33.             /* Move the subscribe button next to the like button */
  34.             #top-level-buttons-computed {
  35.                 display: flex;
  36.                 justify-content: center;
  37.                 gap: 8px;
  38.             }
  39.  
  40.             #top-level-buttons-computed #subscribe-button {
  41.                 order: 2;
  42.             }
  43.  
  44.             /* Add a video list to the left */
  45.             ytd-watch-flexy #related {
  46.                 position: absolute;
  47.                 top: 0;
  48.                 left: 0;
  49.                 width: 20%;
  50.                 max-width: 300px;
  51.                 z-index: 1;
  52.                 margin: 0;
  53.                 padding: 10px;
  54.                 box-shadow: 2px 0 5px rgba(0,0,0,0.3);
  55.                 background: #f9f9f9;
  56.             }
  57.             
  58.             /* Adjust the main video area to make space for the video list */
  59.             ytd-watch-flexy #primary {
  60.                 margin-left: 320px; /* Adjust this to fit the video list */
  61.             }
  62.         `);
  63.     }
  64.  
  65.     // Wait for the DOM to be fully loaded
  66.     window.addEventListener('load', addCustomStyles);
  67. })();