☰

Enhanced YouTube Player with Custom Styles

Customize YouTube player on watch page with a solid red progress bar, no gradients, and additional styling options.

  1. // ==UserScript==
  2. // @name         Enhanced YouTube Player with Custom Styles
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.2
  5. // @description  Customize YouTube player on watch page with a solid red progress bar, no gradients, and additional styling options.
  6. // @author       GPT
  7. // @match        https://www.youtube.com/watch*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Apply custom CSS styling to modify the YouTube player appearance
  15.     GM_addStyle(`
  16.         /* Remove gradients from the progress bar */
  17.         .ytp-swatch-background-color, 
  18.         .ytp-progress-bar-container, 
  19.         .ytp-progress-bar-padding {
  20.             background: transparent !important;
  21.         }
  22.  
  23.         /* Set progress bar to solid red */
  24.         .ytp-play-progress {
  25.             background-color: #FF0000 !important;
  26.             background-image: none !important;
  27.         }
  28.  
  29.         /* Customize other player controls */
  30.         .ytp-chrome-top, 
  31.         .ytp-chrome-controls, 
  32.         .ytp-gradient-bottom, 
  33.         .ytp-gradient-top, 
  34.         .ytp-chrome-bottom {
  35.             background: none !important;
  36.         }
  37.  
  38.         /* Change play button color */
  39.         .ytp-play-button {
  40.             background-color: rgba(255, 0, 0, 0.8) !important;
  41.             border-radius: 4px !important;
  42.         }
  43.  
  44.         /* Change volume slider color */
  45.         .ytp-volume-slider {
  46.             background-color: #FF0000 !important;
  47.         }
  48.  
  49.         /* Style the volume level */
  50.         .ytp-volume-bar {
  51.             background-color: rgba(255, 0, 0, 0.5) !important;
  52.         }
  53.  
  54.         /* Style the fullscreen button */
  55.         .ytp-fullscreen-button {
  56.             background-color: rgba(255, 0, 0, 0.8) !important;
  57.         }
  58.  
  59.         /* Change hover effects */
  60.         .ytp-button:hover {
  61.             background-color: rgba(255, 0, 0, 1) !important;
  62.         }
  63.  
  64.         /* Additional styles for controls */
  65.         .ytp-button {
  66.             border-radius: 5px !important;
  67.         }
  68.     `);
  69.  
  70.     // Function to toggle custom styles on and off
  71.     const toggleCustomStyles = () => {
  72.         const customStylesEnabled = document.body.classList.toggle('custom-youtube-styles');
  73.         if (customStylesEnabled) {
  74.             console.log("Custom YouTube player styles enabled.");
  75.         } else {
  76.             console.log("Custom YouTube player styles disabled.");
  77.         }
  78.     };
  79.  
  80.     // Create a button to toggle styles
  81.     const createToggleButton = () => {
  82.         const button = document.createElement('button');
  83.         button.innerText = 'Toggle YouTube Styles';
  84.         button.style.position = 'fixed';
  85.         button.style.top = '10px';
  86.         button.style.right = '10px';
  87.         button.style.zIndex = '9999';
  88.         button.style.backgroundColor = '#FF0000';
  89.         button.style.color = '#FFFFFF';
  90.         button.style.border = 'none';
  91.         button.style.padding = '10px 15px';
  92.         button.style.borderRadius = '5px';
  93.         button.style.cursor = 'pointer';
  94.         button.addEventListener('click', toggleCustomStyles);
  95.         document.body.appendChild(button);
  96.     };
  97.  
  98.     // Initialize the toggle button
  99.     createToggleButton();
  100.  
  101.     console.log("Enhanced YouTube player styling applied: solid red progress bar, no gradients, and additional custom styles.");
  102. })();