wide video container on youtube
当前为
// ==UserScript==
// @name Youtube - Wide video container
// @namespace 1N07
// @author 1N07
// @icon https://i.imgur.com/VgEiyi3.png
// @description wide video container on youtube
// @include https://www.youtube.com/*
// @version 1.7.6
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
var FPPHandle;
var FPPCompOn = GM_getValue("FPPCompOn", false);
SetFPPHandle();
var ForceCSSHandle;
var ForceCSSOn = GM_getValue("ForceCSSOn", false);
SetForceCSSHandle();
var MaxNumOfVideosPerRowHandle;
var MaxNumOfVideosPerRow = GM_getValue("MaxNumOfVideosPerRow", 6);
SetMaxNumOfVideosPerRowHandle();
var ShowChannelIconNextToVideosOnHomePageHandle;
var ShowChannelIconNextToVideosOnHomePage = GM_getValue("ShowChannelIconNextToVideosOnHomePage", true);
SetShowChannelIconNextToVideosOnHomePageHandle();
var LessenVideoTitleTopMarginOnHomePage = true;
var screenWidth = screen.width;
if(!!document.getElementById("early-body")) { //if old youtube
document.getElementById("content").setAttribute("style", "width: 99%;");
} else { //new youtube
addGlobalStyle(`
ytd-app #page-manager > ytd-browse:not([page-subtype="playlist"]):not([page-subtype="home"]) ytd-two-column-browse-results-renderer.ytd-browse
{
box-sizing: border-box`+(ForceCSSOn ? `!important`:``)+`;
width: calc(100% - 25px) !important;
margin: 10px`+(ForceCSSOn ? `!important`:``)+`;
}
/*channels page rules*/
ytd-app #page-manager > ytd-browse[page-subtype="channels"] ytd-two-column-browse-results-renderer.ytd-browse ytd-item-section-renderer.ytd-section-list-renderer
{
width: calc(100% - 20px);
}
/*for some reason the arrows sometimes dont show up, so now forcing them to*/
ytd-app #page-manager > ytd-browse[page-subtype="channels"] ytd-two-column-browse-results-renderer.ytd-browse ytd-item-section-renderer.ytd-section-list-renderer ytd-button-renderer.yt-horizontal-list-renderer.arrow
{
opacity: 1;
display: flex;
}
/*home page rules*/
@media (min-width:` + (screenWidth - 300) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+MaxNumOfVideosPerRow+` !important;
--ytd-rich-grid-posts-per-row:`+MaxNumOfVideosPerRow+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
@media (min-width:` + (screenWidth - 600) + `px) and (max-width:` + (screenWidth - 301) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 1) >= 3 ? (MaxNumOfVideosPerRow - 1) : 3))+` !important;
--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 1) >= 3 ? (MaxNumOfVideosPerRow - 1) : 3))+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
@media (min-width:` + (screenWidth - 900) + `px) and (max-width:` + (screenWidth - 601) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 2) >= 3 ? (MaxNumOfVideosPerRow - 2) : 3))+` !important;
--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 2) >= 3 ? (MaxNumOfVideosPerRow - 2) : 3))+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
@media (min-width:` + (screenWidth - 1200) + `px) and (max-width:` + (screenWidth - 901) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 3) >= 3 ? (MaxNumOfVideosPerRow - 3) : 3))+` !important;
--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 3) >= 3 ? (MaxNumOfVideosPerRow - 3) : 3))+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
@media (min-width:` + (screenWidth - 1500) + `px) and (max-width:` + (screenWidth - 1201) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 4) >= 3 ? (MaxNumOfVideosPerRow - 4) : 3))+` !important;
--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 4) >= 3 ? (MaxNumOfVideosPerRow - 4) : 3))+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
@media (max-width:` + (screenWidth - 1501) + `px) {
ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
{
--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 6) >= 3 ? (MaxNumOfVideosPerRow - 6) : 3))+` !important;
--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 6) >= 3 ? (MaxNumOfVideosPerRow - 6) : 3))+` !important;
--ytd-rich-grid-movies-per-row:12 !important;
}
}
`);
console.log("Youtube Wide video container style added to DOM");
if(!ShowChannelIconNextToVideosOnHomePage)
{
addGlobalStyle(`
#avatar-link.ytd-rich-grid-video-renderer
{
display: none;
}
`);
}
if(LessenVideoTitleTopMarginOnHomePage)
{
addGlobalStyle(`
h3.ytd-rich-grid-video-renderer
{
margin-top: 6px;
}
`);
}
if(FPPCompOn) {
addGlobalStyle(`
/*========== Fade++ Compatibility ==========*/
ytd-app #page-manager > ytd-browse:not([page-subtype="playlist"]) {
display: block;
}
ytd-app[guide-persistent-and-visible] #page-manager > ytd-browse:not([page-subtype="playlist"]) ytd-two-column-browse-results-renderer.ytd-browse
{
margin-left: 250px !important;
}
`);
console.log("Youtube Wide video container Fade++ compatibilty style added to DOM");
}
}
function SetFPPHandle() {
GM_unregisterMenuCommand(FPPHandle);
FPPHandle = GM_registerMenuCommand("Fade++ Compatibility mode (" + (FPPCompOn ? "On" : "Off") + ") -click to change-", function(){
FPPCompOn = !FPPCompOn;
GM_setValue("FPPCompOn", FPPCompOn);
SetFPPHandle();
if(confirm('Press "OK" to refresh the page to apply new settings'))
location.reload();
});
}
function SetForceCSSHandle() {
GM_unregisterMenuCommand(ForceCSSHandle);
ForceCSSHandle = GM_registerMenuCommand("CSS important rule mode (" + (ForceCSSOn ? "On" : "Off") + ") -click to change-", function(){
ForceCSSOn = !ForceCSSOn;
GM_setValue("ForceCSSOn", ForceCSSOn);
SetForceCSSHandle();
if(confirm('Press "OK" to refresh the page to apply new settings'))
location.reload();
});
}
function SetMaxNumOfVideosPerRowHandle() {
GM_unregisterMenuCommand(MaxNumOfVideosPerRowHandle);
MaxNumOfVideosPerRowHandle = GM_registerMenuCommand("[homepage] Max number of videos per row (" + MaxNumOfVideosPerRow + ") -click to change-", function(){
MaxNumOfVideosPerRow = prompt("Set the max number of videos per row on the home page. (Does not affect total number of videos shown, just the number on each ROW)");
GM_setValue("MaxNumOfVideosPerRow", MaxNumOfVideosPerRow);
SetMaxNumOfVideosPerRowHandle();
if(confirm('Press "OK" to refresh the page to apply new settings'))
location.reload();
});
}
function SetShowChannelIconNextToVideosOnHomePageHandle() {
GM_unregisterMenuCommand(ShowChannelIconNextToVideosOnHomePageHandle);
ShowChannelIconNextToVideosOnHomePageHandle = GM_registerMenuCommand("[homepage] Show channel icons next to videos (" + (ShowChannelIconNextToVideosOnHomePage ? "Yes" : "No") + ") -click to change-", function(){
ShowChannelIconNextToVideosOnHomePage = !ShowChannelIconNextToVideosOnHomePage;
GM_setValue("ShowChannelIconNextToVideosOnHomePage", ShowChannelIconNextToVideosOnHomePage);
SetShowChannelIconNextToVideosOnHomePageHandle();
if(confirm('Press "OK" to refresh the page to apply new settings'))
location.reload();
});
}
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
})();