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