☰

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 like comet works only when url don't contain "app=desktop"

  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 like comet works only when url don't 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, or better use https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/
  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. `);