☰

Greasy Fork 还支持 简体中文。

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

Fixes the width when viewing Youtube desktop mode on small screen device, useful when your using add-ons that is only available on desktop mode, ex: Comet - Reddit Comments on YouTube & Webpages, *use https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/ some add ons works only when url dont contain "app=desktop"

目前為 2024-04-23 提交的版本，檢視 最新版本。

  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.4
  5. // @description  Fixes the width when viewing Youtube desktop mode on small screen device, useful when your using add-ons that is only available on desktop mode, ex: Comet - Reddit Comments on YouTube & Webpages, *use https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/ some add ons works only when url dont contain "app=desktop"
  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: 999px) {
  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. 		.video-stream {
  54. 			width: 100vw !important;
  55. 			height: calc(100vw * var(--ytd-watch-flexy-height-ratio) / var(--ytd-watch-flexy-width-ratio)) !important;
  56. 		}
  57.  
  58. 		ytd-watch-flexy[flexy]:not([fixed-panels]) #primary.ytd-watch-flexy {
  59. 			margin-left: 0 !important;
  60. 			padding-right: 0 !important;
  61. 		}
  62.  
  63. 		#bottom-row.ytd-watch-metadata,
  64. 		#description.ytd-watch-metadata,
  65. 		#description-inner.ytd-watch-metadata {
  66. 			margin-left: 0 !important;
  67. 			margin-right: 0 !important;
  68. 			min-width: 100vw !important;
  69. 			max-width: 100vw !important;
  70. 		}
  71.  
  72. 		#columns {
  73. 			overflow-x: hidden !important;
  74. 		}
  75.  
  76. 		#container.ytd-player video {
  77. 			width: 100vw !important !important;
  78. 		}
  79.  
  80. 		.ytp-progress-bar-container {
  81. 			width: calc(100vw - 20px) !important;
  82. 			left: 10px !important;
  83. 			bottom: 56px !important;
  84. 		}
  85. 		.ytp-progress-list,
  86.         .ytp-progress-bar-padding {
  87.              width: calc(100vw - 20px) !important;
  88.         }
  89. 		#description-inner.ytd-watch-metadata,
  90. 		#description-inner {
  91. 			margin-left: 0px  !important;
  92. 			margin-right: 0px  !important;
  93. 		}
  94.  
  95. 		.ytp-chrome-bottom {
  96. 			width: 100vw !important;
  97. 			left: 0 !important;
  98. 		}
  99.  
  100. 		.ytp-tooltip {
  101. 			display: none !important;
  102. 		}
  103.  
  104. 		#dismissible.ytd-video-renderer {
  105. 			flex-direction: column !important;
  106. 		}
  107.  
  108. 		ytd-video-renderer[use-bigger-thumbs][bigger-thumbs-style="BIG"] ytd-thumbnail.ytd-video-renderer {
  109. 			max-width: calc(100vw - 48px) !important;
  110.             min-width: calc(100vw - 48px) !important;
  111. 			margin: 0 0 16px 0 !important;
  112. 		}
  113.  
  114. 		ytd-video-renderer[use-search-ui] .text-wrapper.ytd-video-renderer {
  115. 			max-width: calc(100vw - 48px) !important;
  116. 		}
  117.  
  118. 		#thumbnail.ytd-expandable-metadata-renderer {
  119. 			display: none !important;
  120. 		}
  121. 	}
  122.  
  123. `);