Sets YouTube caption window width to 100%, unsets left property, and centers text.
// ==UserScript==
// @name YouTube Caption Window Resizer
// @namespace http://tampermonkey.net/
// @version 0.1
// @license MIT
// @description Sets YouTube caption window width to 100%, unsets left property, and centers text.
// @author Your Name
// @match *://www.youtube.com/*
// @grant none
// ==/UserScript==
(
function()
{
'use strict';
const applyCaptionStyles = () =>
{
const captionWindow = document.querySelector('.caption-window.ytp-caption-window-bottom.ytp-caption-window-rollup');
if (captionWindow)
{
captionWindow.style.width = '100%';
captionWindow.style.left = ''; // Unsets the left property
captionWindow.style.textAlign = 'center';
console.log('Caption window styles applied.');
}
};
// Use a MutationObserver to detect when the caption window is added to the DOM
const observer = new MutationObserver
(
(mutationsList) =>
{
for (const mutation of mutationsList)
{
if (mutation.type === 'childList' && mutation.addedNodes.length > 0)
{
// Check if the added node is the caption window or contains it
if( mutation.addedNodes[0].classList && mutation.addedNodes[0].classList.contains('caption-window') || mutation.addedNodes[0].querySelector('.caption-window.ytp-caption-window-bottom.ytp-caption-window-rollup'))
{
applyCaptionStyles();
}
}
else if (mutation.type === 'attributes' && mutation.target.classList.contains('caption-window'))
{
// Reapply styles if caption window attributes change (e.g., visibility)
applyCaptionStyles();
}
}
}
);
// Start observing the body for changes
observer.observe
(
document.body,
{
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'class'] // Observe changes to style and class attributes
}
);
// Also apply styles on initial load, in case the caption window is already present
applyCaptionStyles();
}
)();