Customize YouTube player on watch page with a solid red progress bar, no gradients, and additional styling options.
// ==UserScript==
// @name Enhanced YouTube Player with Custom Styles
// @namespace http://tampermonkey.net/
// @version 1.2
// @description Customize YouTube player on watch page with a solid red progress bar, no gradients, and additional styling options.
// @author GPT
// @match https://www.youtube.com/watch*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Apply custom CSS styling to modify the YouTube player appearance
GM_addStyle(`
/* Remove gradients from the progress bar */
.ytp-swatch-background-color,
.ytp-progress-bar-container,
.ytp-progress-bar-padding {
background: transparent !important;
}
/* Set progress bar to solid red */
.ytp-play-progress {
background-color: #FF0000 !important;
background-image: none !important;
}
/* Customize other player controls */
.ytp-chrome-top,
.ytp-chrome-controls,
.ytp-gradient-bottom,
.ytp-gradient-top,
.ytp-chrome-bottom {
background: none !important;
}
/* Change play button color */
.ytp-play-button {
background-color: rgba(255, 0, 0, 0.8) !important;
border-radius: 4px !important;
}
/* Change volume slider color */
.ytp-volume-slider {
background-color: #FF0000 !important;
}
/* Style the volume level */
.ytp-volume-bar {
background-color: rgba(255, 0, 0, 0.5) !important;
}
/* Style the fullscreen button */
.ytp-fullscreen-button {
background-color: rgba(255, 0, 0, 0.8) !important;
}
/* Change hover effects */
.ytp-button:hover {
background-color: rgba(255, 0, 0, 1) !important;
}
/* Additional styles for controls */
.ytp-button {
border-radius: 5px !important;
}
`);
// Function to toggle custom styles on and off
const toggleCustomStyles = () => {
const customStylesEnabled = document.body.classList.toggle('custom-youtube-styles');
if (customStylesEnabled) {
console.log("Custom YouTube player styles enabled.");
} else {
console.log("Custom YouTube player styles disabled.");
}
};
// Create a button to toggle styles
const createToggleButton = () => {
const button = document.createElement('button');
button.innerText = 'Toggle YouTube Styles';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '9999';
button.style.backgroundColor = '#FF0000';
button.style.color = '#FFFFFF';
button.style.border = 'none';
button.style.padding = '10px 15px';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
button.addEventListener('click', toggleCustomStyles);
document.body.appendChild(button);
};
// Initialize the toggle button
createToggleButton();
console.log("Enhanced YouTube player styling applied: solid red progress bar, no gradients, and additional custom styles.");
})();