☰

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 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Fix width of YouTube Desktop for small screen device (mobile)
// @namespace    Youtube desktop fix for mobile device
// @version      1.0.4
// @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"
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// @license      MIT
// @run-at       document-start
// ==/UserScript==


// scale viewport to correct website width */
(function() {
    'use strict';
    var head = document.getElementsByTagName("head")[0];
    var meta = document.createElement("meta");
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1");
    head.appendChild(meta);
})();


// apply user Agent, change it to your desired userAgent
Object.defineProperty(navigator, 'userAgent', {
  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'
});


// apply some css adjustment
function GM_addStyle(css) {
	let head = document.getElementsByTagName("head")[0];
	if (!head) {
		return;
	}
	let style = document.createElement("style");
    style.type = "text/css";
	style.innerHTML = css;
	head.appendChild(style);
}

GM_addStyle(`

	@media screen and (max-width: 999px) {
		div.style-scope[id="related"] {
			display: none !important;
		}

		ytd-watch-flexy[flexy] {
			--ytd-watch-flexy-min-player-width: 100vw !important;
		}

		.video-stream {
			width: 100vw !important;
			height: calc(100vw * var(--ytd-watch-flexy-height-ratio) / var(--ytd-watch-flexy-width-ratio)) !important;
		}

		ytd-watch-flexy[flexy]:not([fixed-panels]) #primary.ytd-watch-flexy {
			margin-left: 0 !important;
			padding-right: 0 !important;
		}

		#bottom-row.ytd-watch-metadata,
		#description.ytd-watch-metadata,
		#description-inner.ytd-watch-metadata {
			margin-left: 0 !important;
			margin-right: 0 !important;
			min-width: 100vw !important;
			max-width: 100vw !important;
		}

		#columns {
			overflow-x: hidden !important;
		}

		#container.ytd-player video {
			width: 100vw !important !important;
		}

		.ytp-progress-bar-container {
			width: calc(100vw - 20px) !important;
			left: 10px !important;
			bottom: 56px !important;
		}
		.ytp-progress-list,
        .ytp-progress-bar-padding {
             width: calc(100vw - 20px) !important;
        }
		#description-inner.ytd-watch-metadata,
		#description-inner {
			margin-left: 0px  !important;
			margin-right: 0px  !important;
		}

		.ytp-chrome-bottom {
			width: 100vw !important;
			left: 0 !important;
		}

		.ytp-tooltip {
			display: none !important;
		}

		#dismissible.ytd-video-renderer {
			flex-direction: column !important;
		}

		ytd-video-renderer[use-bigger-thumbs][bigger-thumbs-style="BIG"] ytd-thumbnail.ytd-video-renderer {
			max-width: calc(100vw - 48px) !important;
            min-width: calc(100vw - 48px) !important;
			margin: 0 0 16px 0 !important;
		}

		ytd-video-renderer[use-search-ui] .text-wrapper.ytd-video-renderer {
			max-width: calc(100vw - 48px) !important;
		}

		#thumbnail.ytd-expandable-metadata-renderer {
			display: none !important;
		}
	}

`);