Fix width of YouTube Desktop for small screen device (mobile)

Fixes the width when viewing Youtube dektop mode on small screen device, useful when your using add-ons that is only available on dektop mode, ex: Comet - Reddit Comments on YouTube & Webpages

当前为 2024-03-08 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Fix width of YouTube Desktop for small screen device (mobile)
  3. // @namespace Youtube desktop fix for mobile device
  4. // @version 1.0.1
  5. // @description Fixes the width when viewing Youtube dektop mode on small screen device, useful when your using add-ons that is only available on dektop mode, ex: Comet - Reddit Comments on YouTube & Webpages
  6. // @match https://www.youtube.com/*
  7. // @grant GM_addStyle
  8. // @license MIT
  9. // @run-at document-start
  10. // ==/UserScript==
  11.  
  12.  
  13. // scale viewport to correct website width */
  14. (function() {
  15. 'use strict';
  16. var head = document.getElementsByTagName("head")[0];
  17. var meta = document.createElement("meta");
  18. meta.setAttribute("name", "viewport");
  19. meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1");
  20. head.appendChild(meta);
  21. })();
  22.  
  23.  
  24. // apply user Agent, change it to your desired userAgent
  25. Object.defineProperty(navigator, 'userAgent', {
  26. value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.100.0'
  27. });
  28.  
  29.  
  30. // apply some css adjustment
  31. function GM_addStyle(css) {
  32. let head = document.getElementsByTagName("head")[0];
  33. if (!head) {
  34. return;
  35. }
  36. let style = document.createElement("style");
  37. style.type = "text/css";
  38. style.innerHTML = css;
  39. head.appendChild(style);
  40. }
  41.  
  42. GM_addStyle(`
  43.  
  44. @media screen and (max-width: 700px) {
  45. div.style-scope[id="related"] {
  46. display: none !important;
  47. }
  48.  
  49. ytd-watch-flexy[flexy] {
  50. --ytd-watch-flexy-min-player-width: 100vw !important;
  51. }
  52.  
  53. ytd-watch-flexy[flexy]:not([fixed-panels]) #primary.ytd-watch-flexy {
  54. margin-left: 0;
  55. padding-right: 0;
  56. }
  57.  
  58. #bottom-row.ytd-watch-metadata,
  59. #description.ytd-watch-metadata,
  60. #description-inner.ytd-watch-metadata {
  61. margin-left: 0;
  62. margin-right: 0;
  63. min-width: 100vw;
  64. max-width: 100vw;
  65. }
  66.  
  67. #columns {
  68. overflow-x: hidden;
  69. }
  70.  
  71. #container.ytd-player video {
  72. width: 100vw !important;
  73. }
  74.  
  75. .ytp-progress-bar-container {
  76. width: calc(100vw - 20px) !important;
  77. left: 10px;
  78. bottom: 56px !important;
  79. }
  80.  
  81. .ytp-chrome-bottom {
  82. width: 100vw !important;
  83. left: 0 !important;
  84. }
  85.  
  86. .ytp-tooltip {
  87. display: none;
  88. }
  89. }
  90.  
  91. `);