Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.
// ==UserScript==
// @name fix youtube caption position
// @namespace http://tampermonkey.net/
// @version 2.5
// @description Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.
// @author You
// @match *://*.youtube.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
console.log('fix youtube caption position begin excuting');
let captionContainerID= "#ytp-caption-window-container";
const intervalID = setInterval(checkContainer, 500);
function checkContainer(){
if(document.querySelector(captionContainerID)!=null){
console.log("container loaded");
clearInterval(intervalID);
console.log("interval cleared.");
fixCaption();
}
}
function fixCaption(){
//const captionStyle="touch-action: none; text-align: left; overflow: hidden; left: 1.2%; width: 420px; height: 38px; margin-bottom:1px;";
const cMarginBottom = 'margin-bottom: 1px !important;';
const cBottom = 'bottom: 0.01% !important;';
const cLeft = 'left: 45% !important;';
const captionSelector = ".ytp-caption-window-container .caption-window.ytp-caption-window-bottom";
let newCssCaption;
// `
// #target {
// margin-bottom: 1px !important;
// bottom: 1% !important;
// }
// `;
let styleTag;
const captionContainer = document.querySelector(captionContainerID);
const configContainer = {childList: true};
//const configCaptionStyle = {attributeFilter: ["style"]};
function nodeAdded(mutationList){
for(const mutation of mutationList){
console.log(mutation);
if(mutation.type==="childList"){
if (mutation.addedNodes.length===1){
// console.log("caption appear~");
// let caption = document.querySelector(captionSelector);
let caption = captionContainer.firstElementChild;
console.log(caption);
// console.log(caption.getAttribute('style'));
// caption.setAttribute('style', captionStyle);
// console.log(caption.getAttribute('id'));
// console.log("attribute after setted");
// console.log(caption.getAttribute('style'));
// oberverCaptionStyle.observe(caption,configCaptionStyle);
// captionClass = caption.getAttribute('class');
styleTag = document.createElement('style');
newCssCaption= captionSelector + "{" +
cMarginBottom +
cBottom +
cLeft +
"}";
styleTag.innerHTML = newCssCaption;
document.head.appendChild(styleTag);
console.log(styleTag);
observerNodeAdded.disconnect();
}
if (mutation.removedNodes.length===1){
// oberverCaptionStyle.disconnect();
// styleTag.parentNode.removeChild( theScript );
}
}
}
}
// function captionStyleChanged(mutationList){
// for (const mutation of mutationList){
// // console.log(mutation);
// // let caption = document.querySelector(".ytp-larger-tap-buttons .caption-window.ytp-caption-window-bottom");
// // console.log(caption.getAttribute('style'));
// // caption.setAttribute('style', captionStyle);
// // console.log(caption.getAttribute('id'));
// // console.log("attribute after setted");
// // console.log(caption.getAttribute('style'));
// }
// }
//const oberverCaptionStyle = new MutationObserver(captionStyleChanged);
const observerNodeAdded = new MutationObserver(nodeAdded);
observerNodeAdded.observe(captionContainer, configContainer);
console.log("fix youtube caption position run successfully.");
}
})();