☰

fix youtube caption position

Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.

  1. // ==UserScript==
  2. // @name         fix youtube caption position
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.7
  5. // @description  Fix youtube caption's position. You can change the position by change the variable of cMarginBottom, cBottom or cLeft.
  6. // @author       You
  7. // @match        *://*.youtube.com/*
  8. // @grant        none
  9.  // @license MIT
  10. // ==/UserScript==
  11. (function() {
  12.     'use strict';
  13. console.log('fix youtube caption position begin excuting');
  14.  
  15.     if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) {
  16.     window.trustedTypes.createPolicy('default', {
  17.         createHTML: string => string
  18.         // Optional, only needed for script (url) tags
  19.         //,createScriptURL: string => string
  20.         //,createScript: string => string,
  21.     });
  22. }
  23.  
  24. let captionContainerID= "#ytp-caption-window-container";
  25. const intervalID = setInterval(checkContainer, 500);
  26. function checkContainer(){
  27.     if(document.querySelector(captionContainerID)!=null){
  28.         console.log("container loaded");
  29.         clearInterval(intervalID);
  30.         console.log("interval cleared.");
  31.         fixCaption();
  32.     }
  33. }
  34.  
  35. function fixCaption(){
  36.  
  37.     //const captionStyle="touch-action: none; text-align: left; overflow: hidden; left: 1.2%; width: 420px; height: 38px; margin-bottom:1px;";
  38. const cMarginBottom = 'margin-bottom: 1px !important;';
  39. const cBottom = 'bottom: 0.01% !important;';
  40. const cLeft = 'left: 45% !important;';
  41. const captionSelector = ".ytp-caption-window-container .caption-window.ytp-caption-window-bottom";
  42. let newCssCaption;
  43.                     // `
  44.                     //   #target {
  45.                     //       margin-bottom: 1px !important;
  46.                     //       bottom: 1% !important;
  47.                     //   }
  48.                     // `;
  49. let styleTag;
  50. const captionContainer = document.querySelector(captionContainerID);
  51. const configContainer = {childList: true};
  52. //const configCaptionStyle = {attributeFilter: ["style"]};
  53.  
  54. function nodeAdded(mutationList){
  55.     for(const mutation of mutationList){
  56.         console.log(mutation);
  57.         if(mutation.type==="childList"){
  58.             if (mutation.addedNodes.length===1){
  59.                 // console.log("caption appear~");
  60.                 // let caption = document.querySelector(captionSelector);
  61.                 let caption = captionContainer.firstElementChild;
  62.                 console.log(caption);
  63.                 // console.log(caption.getAttribute('style'));
  64.                 // caption.setAttribute('style', captionStyle);
  65.                 // console.log(caption.getAttribute('id'));
  66.                 // console.log("attribute after setted");
  67.                 // console.log(caption.getAttribute('style'));
  68.                 // oberverCaptionStyle.observe(caption,configCaptionStyle);
  69.                 // captionClass = caption.getAttribute('class');
  70.                 styleTag = document.createElement('style');
  71.                 newCssCaption= captionSelector + "{" +
  72.                                                       cMarginBottom +
  73.                                                       cBottom +
  74.                                                       cLeft +
  75.                                                   "}";
  76.                 styleTag.innerHTML = newCssCaption;
  77.                 document.head.appendChild(styleTag);
  78.                 console.log(styleTag);
  79.                 observerNodeAdded.disconnect();
  80.             }
  81.             if (mutation.removedNodes.length===1){
  82.                 // oberverCaptionStyle.disconnect();
  83.                 // styleTag.parentNode.removeChild( theScript );
  84.             }
  85.         }
  86.     }
  87. }
  88.  
  89. // function captionStyleChanged(mutationList){
  90. //     for (const mutation of mutationList){
  91. //          // console.log(mutation);
  92. //          // let caption = document.querySelector(".ytp-larger-tap-buttons .caption-window.ytp-caption-window-bottom");
  93. //          // console.log(caption.getAttribute('style'));
  94. //          // caption.setAttribute('style', captionStyle);
  95. //          // console.log(caption.getAttribute('id'));
  96. //          // console.log("attribute after setted");
  97. //          // console.log(caption.getAttribute('style'));
  98. //     }
  99. // }
  100.  
  101. //const oberverCaptionStyle = new MutationObserver(captionStyleChanged);
  102. const observerNodeAdded = new MutationObserver(nodeAdded);
  103. observerNodeAdded.observe(captionContainer, configContainer);
  104. console.log("fix youtube caption position run successfully.");
  105. }
  106. })();