YouTube Watch Page Chat-Replay CSS

Customize video and chat layout on YouTube watch page

  1. // ==UserScript==
  2. // @name YouTube Watch Page Chat-Replay CSS
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0
  5. // @description Customize video and chat layout on YouTube watch page
  6. // @match https://www.youtube.com/watch?v=*
  7. // @grant none
  8. // @license CC0
  9. // ==/UserScript==
  10.  
  11.  
  12. (function () {
  13. 'use strict';
  14. let styleElement = null;
  15. const css = `/* video */
  16. #player, .html5-main-video, #movie_player {
  17. position: absolute !important;
  18. top: 0px !important;
  19. left: 0px !important;
  20. width: calc(100vw - 420px) !important;
  21. height: calc(105vh - 58px) !important;
  22. object-fit: contain !important;
  23. border: 1px solid #000 !important;
  24. }
  25. .ytp-chrome-bottom {
  26. width: 100vw !important;
  27. }
  28.  
  29. /* chat */
  30. #chat {
  31. position: absolute !important;
  32. top: -56px !important;
  33. left: 4px !important;
  34. width: 420px !important;
  35. height: 100vh !important;
  36. overflow-y: auto !important;
  37. border-radius: 0px !important;
  38. border: 1px solid #333 !important;
  39. }
  40.  
  41. /* hide everything else */
  42. #above-the-fold, .ytd-watch-metadata, #comments, #chips, .ytd-watch-next-secondary-results-renderer, .ytd-masthead, #end {
  43. display: none !important;
  44. }
  45.  
  46. `
  47. document.addEventListener('keydown', function (e) {
  48. // Use F2 as toggle key
  49. if (e.key === 'F2') {
  50. if (styleElement) {
  51. styleElement.remove();
  52. styleElement = null;
  53. } else {
  54. styleElement = document.createElement('style');
  55. styleElement.textContent = css;
  56. document.head.appendChild(styleElement);
  57. }
  58. }
  59. });
  60. })();
  61.  
  62.  
  63.  

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址