Hide all YouTube player UI (buttons, spinner, shadows, ads, branding, related videos suggestions when the video ends) immediately and show them only on mouse hover.
// ==UserScript==
// @name YouTube Clean & Fast (Hide UI/Spinner)
// @namespace https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
// @version 3
// @description Hide all YouTube player UI (buttons, spinner, shadows, ads, branding, related videos suggestions when the video ends) immediately and show them only on mouse hover.
// @author hacker09
// @match *://www.youtube.com/embed/*
// @match *://www.youtube.com/watch*
// @icon https://www.youtube.com/s/desktop/03f86491/img/favicon.ico
// @run-at document-start
// @grant none
// ==/UserScript==
(function() {
'use strict';
const css = `
/* === MAIN UI HIDING (Opacity 0 when mouse is not moving) === */
/* 1. Top Controls (Title, Share, Favicon) */
body.tm-clean-ui .ytp-chrome-top,
/* 2. Bottom Controls (Time, Bar, Buttons, Fullscreen) */
body.tm-clean-ui .ytp-chrome-bottom,
/* 3. Shadows (Gradients at top/bottom) */
body.tm-clean-ui .ytp-gradient-top,
body.tm-clean-ui .ytp-gradient-bottom,
/* 4. Center Play Button */
body.tm-clean-ui .ytp-large-play-button,
/* 5. THE SPINNER (Buffering/Loading circle) */
body.tm-clean-ui .ytp-spinner,
/* 6. Bezel (Play/Pause animation icon in the middle) */
body.tm-clean-ui .ytp-bezel-text-wrapper,
body.tm-clean-ui .ytp-bezel,
/* 7. Branding & Popups */
body.tm-clean-ui .ytp-watermark,
body.tm-clean-ui .ytp-upnext,
body.tm-clean-ui .ytp-pause-overlay-container,
body.tm-clean-ui .ytp-share-panel,
body.tm-clean-ui .ytp-storyboard-framepreview,
body.tm-clean-ui .ytp-cued-thumbnail-overlay,
/* 8. Top Alerts (Exclude actual bottom subtitles) */
body.tm-clean-ui .ytp-caption-window-top,
/* 9. Suggested Ads & Products (Merch, "View Products" overlay) */
body.tm-clean-ui .ytp-suggested-action,
body.tm-clean-ui .ytp-featured-product,
/* 10. Channel Branding & Quick Actions */
body.tm-clean-ui .iv-branding,
body.tm-clean-ui .ytp-fullscreen-quick-actions
{
opacity: 0 !important;
visibility: hidden !important;
display: none !important;
transition: opacity 0.1s ease-out !important;
}
/* === EXCEPTIONS (Always Visible) === */
/* Ensure Subtitles are visible */
body.tm-clean-ui .ytp-caption-window-bottom {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* Ensure Video is visible */
body.tm-clean-ui .html5-main-video {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
/* === END SCREEN SUGGESTIONS (Fully Hidden by default) === */
/* Keep them at 0 opacity so they don't block the video ending view at all.
Only show fully when the mouse is directly over the specific element area.
We must keep visibility:visible so the hover event can still trigger. */
.ytp-ce-element {
opacity: 0 !important;
transition: opacity 0.2s ease-in-out !important;
}
.ytp-ce-element:hover {
opacity: 1 !important;
}
/* === RESTORE MAIN UI ON HOVER (General Area) === */
.ytp-chrome-top,
.ytp-chrome-bottom,
.ytp-caption-window-top {
transition: opacity 0.1s ease-in !important;
}
`;
// Inject CSS immediately
const styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.appendChild(document.createTextNode(css));
(document.head || document.documentElement).appendChild(styleNode);
// Logic to toggle the class
function initLogic() {
const targetBody = document.body;
targetBody.classList.add('tm-clean-ui');
const hideUI = () => targetBody.classList.add('tm-clean-ui');
const showUI = () => targetBody.classList.remove('tm-clean-ui');
// Show on mouse enter/move within the player body area
targetBody.addEventListener('mouseenter', showUI, false);
targetBody.addEventListener('mousemove', showUI, false);
// Hide on mouse leave the player body area
targetBody.addEventListener('mouseleave', hideUI, false);
}
// Initialize
if (document.body) {
initLogic();
} else {
document.addEventListener('DOMContentLoaded', initLogic);
}
})();