☰

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

Від 08.03.2024. Дивіться остання версія.

// ==UserScript==
// @name         Fix width of YouTube Desktop for small screen device (mobile)
// @namespace    Youtube desktop fix for mobile device
// @version      1.0.1
// @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
// @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: 700px) {
		div.style-scope[id="related"] {
			display: none !important;
		}

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

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

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

		#columns {
			overflow-x: hidden;
		}

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

		.ytp-progress-bar-container {
			width: calc(100vw - 20px) !important;
			left: 10px;
			bottom: 56px !important;
		}

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

		.ytp-tooltip {
			display: none;
		}
	}

`);