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
目前為
// ==UserScript==
// @name Fix width of YouTube Desktop for small screen device (mobile)
// @namespace Youtube desktop fix for mobile device
// @version 1.0
// @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; rv:100.0) Gecko/20100101 Firefox/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;
}
}
`);