Greasy Fork is available in English.
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 http://greasyfork.icu/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);
}
})();