☰

Hide Youtube video title and player control bar

Hide Youtube video title and player control bar when playing in full screen.

当前为 2023-02-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Hide Youtube video title and player control bar
  3. // @description     Hide Youtube video title and player control bar when playing in full screen.
  4. // @author          Wanten
  5. // @copyright       2023 Wanten
  6. // @license         MIT
  7. // @supportURL      https://github.com/WantenMN/userscript-youtube/issues
  8. // @icon            https://youtube.com/favicon.ico
  9. // @homepageURL     https://github.com/WantenMN/userscript-youtube
  10. // @namespace       https://greasyfork.org/en/scripts/460569
  11. // @version         0.0.5
  12. // @match           http*://*.youtube.com/watch?*
  13. // @match           http*://youtube.com/watch?*
  14. // @match           http*://*.youtu.be/watch?*
  15. // @match           http*://youtu.be/watch?*
  16. // @run-at          document-end
  17. // @grant           GM_addStyle
  18. // ==/UserScript==
  19.  
  20.  
  21. (function () {
  22.   "use strict";
  23.  
  24.   /**
  25.    * settings-start
  26.    */
  27.   //shortcut key to toggle the script
  28.   const toggleKey = 'e';
  29.  
  30.   //Wether hide player progress bar, when pause a video by click spacebar or press K 
  31.   //true or false
  32.   const hideProgressBar = true;
  33.  
  34.   //Wether to hide video title and player control bar when mousemove
  35.   //true: show
  36.   //false：hide
  37.   const isMouseMoveToggle = true;
  38.   /**
  39.    * settings-end
  40.    */
  41.  
  42.   const enableStyle = `
  43.   .ytp-chrome-top {
  44.     display: none !important;
  45.   }
  46.   .ytp-gradient-top {
  47.     display: none !important;
  48.   }
  49.   .ytp-chrome-controls {
  50.     display: none !important;
  51.   }
  52.   .ytp-gradient-bottom {
  53.     display: none !important;
  54.   }
  55.   .ytp-progress-bar-container {
  56.     bottom: 10px !important;
  57.     ${hideProgressBar ? 'display: none !important;' : ''}
  58.   }
  59.   .caption-window, .caption-window.ytp-caption-window-bottom, .caption-window ytp-caption-window-top {
  60.     margin-bottom: 0px !important;
  61.     margin-top: 0px !important;
  62.   }
  63.   .annotation {
  64.     display: none !important;
  65.   }
  66.   `;
  67.  
  68.   let enableFlag = false;
  69.   let styleTag = null;
  70.   let mouseMoveSetTimeoutID = null;
  71.  
  72.   //keydown toggle
  73.   window.addEventListener("keydown", (e) => {
  74.     if (e.key === toggleKey) {
  75.       clearTimeout(mouseMoveSetTimeoutID)
  76.       enableFlag = !enableFlag;
  77.       styleTag && removeStyleTag();
  78.       enableFlag && addStyleTag();
  79.     }
  80.   });
  81.  
  82.   //mousemove toggle
  83.   window.addEventListener("mousemove", (e) => {
  84.     clearTimeout(mouseMoveSetTimeoutID)
  85.     if (!isMouseMoveToggle || !enableFlag) return;
  86.     styleTag && removeStyleTag();
  87.     mouseMoveSetTimeoutID = setTimeout(() => {
  88.       enableFlag && addStyleTag();
  89.     }, 3500)
  90.   });
  91.  
  92.   const addStyleTag = () => {
  93.     styleTag = GM_addStyle(enableStyle);
  94.   }
  95.  
  96.   const removeStyleTag = () => {
  97.     document.head.removeChild(styleTag);
  98.     styleTag = null;
  99.   }
  100. })();