Toggles text visible that is overlaying the Youtube Short(e.g captions, channel name)
// ==UserScript==
// @name Youtube Shorts Text Removal
// @namespace Violentmonkey Scripts
// @match *://www.youtube.com/*
// @grant none
// @version 1.0
// @description Toggles text visible that is overlaying the Youtube Short(e.g captions, channel name)
// @license MIT
// ==/UserScript==
(function () {
let isTextHidden = false; // Default: text is visible
let defaultHidden = false; // Default setting for new reels
let buttonsContainer = null; // Holds the buttons
let observer = null;
function addButtons() {
if (buttonsContainer) return; // Prevent duplicate buttons
buttonsContainer = document.createElement('div');
buttonsContainer.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 5px;
opacity: 0.2;
transition: opacity 0.3s ease;
`;
// Add hover effect to container
buttonsContainer.addEventListener('mouseenter', () => {
buttonsContainer.style.opacity = '0.9';
});
buttonsContainer.addEventListener('mouseleave', () => {
buttonsContainer.style.opacity = '0.2';
});
// Toggle text button
const toggleButton = document.createElement('button');
toggleButton.textContent = 'Toggle Text';
toggleButton.style.cssText = `
padding: 8px 16px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
`;
toggleButton.addEventListener('click', () => toggleTextVisibility());
// Add hover effect to button
toggleButton.addEventListener('mouseenter', () => {
toggleButton.style.background = 'rgba(0, 0, 0, 0.9)';
});
toggleButton.addEventListener('mouseleave', () => {
toggleButton.style.background = 'rgba(0, 0, 0, 0.7)';
});
// Default mode button
const modeButton = document.createElement('button');
modeButton.textContent = 'Default: Visible';
modeButton.style.cssText = `
padding: 8px 16px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
`;
modeButton.addEventListener('click', () => {
defaultHidden = !defaultHidden;
modeButton.textContent = defaultHidden ? 'Default: Hidden' : 'Default: Visible';
});
// Add hover effect to button
modeButton.addEventListener('mouseenter', () => {
modeButton.style.background = 'rgba(0, 0, 0, 0.9)';
});
modeButton.addEventListener('mouseleave', () => {
modeButton.style.background = 'rgba(0, 0, 0, 0.7)';
});
buttonsContainer.appendChild(toggleButton);
buttonsContainer.appendChild(modeButton);
document.body.appendChild(buttonsContainer);
}
function removeButtons() {
if (buttonsContainer) {
buttonsContainer.remove();
buttonsContainer = null;
}
}
function toggleTextVisibility(forceState = null) {
const textElements = document.querySelectorAll('.ytShortsTitleText, .metadata-container');
const hideText = forceState !== null ? forceState : !isTextHidden;
textElements.forEach(element => {
element.style.display = hideText ? 'none' : '';
});
isTextHidden = hideText;
}
function applyDefaultTextVisibility() {
setTimeout(() => {
toggleTextVisibility(defaultHidden);
}, 100);
}
function fixButtonPositions() {
const actionContainers = document.querySelectorAll('.action-container.style-scope.ytd-reel-player-overlay-renderer');
actionContainers.forEach(actionContainer => {
if (actionContainer) {
actionContainer.style.cssText = `
margin-right: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2000 !important;
`;
}
});
const buttons = document.querySelectorAll('.button-container');
buttons.forEach(button => {
button.style.display = 'flex';
button.style.visibility = 'visible';
button.style.opacity = '1';
});
}
function setupObserver() {
if (observer) observer.disconnect(); // Clear old observer
observer = new MutationObserver(() => {
fixButtonPositions();
applyDefaultTextVisibility();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
function checkPage() {
if (location.pathname.startsWith("/shorts/")) {
addButtons();
fixButtonPositions();
applyDefaultTextVisibility();
setupObserver();
} else {
removeButtons(); // Remove buttons when leaving Shorts
}
}
// Detect SPA (YouTube false navigation)
const ytNavigationObserver = new MutationObserver(() => {
checkPage();
});
ytNavigationObserver.observe(document.body, {
childList: true,
subtree: true
});
checkPage(); // Initial check on load
})();