☰

Youtube - Wide video container

wide video container on youtube

当前为 2020-01-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Youtube - Wide video container
  3. // @namespace   1N07
  4. // @author      1N07
  5. // @icon        https://i.imgur.com/VgEiyi3.png
  6. // @description wide video container on youtube
  7. // @include     https://www.youtube.com/*
  8. // @version     1.7.7
  9. // @grant       GM_registerMenuCommand
  10. // @grant       GM_unregisterMenuCommand
  11. // @grant       GM_getValue
  12. // @grant       GM_setValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.  
  17.     var FPPHandle;
  18.     var FPPCompOn = GM_getValue("FPPCompOn", false);
  19.     SetFPPHandle();
  20.  
  21. 	var ForceCSSHandle;
  22.     var ForceCSSOn = GM_getValue("ForceCSSOn", false);
  23.     SetForceCSSHandle();
  24.  
  25.     var MaxNumOfVideosPerRowHandle;
  26.     var MaxNumOfVideosPerRow = GM_getValue("MaxNumOfVideosPerRow", 6);
  27.     SetMaxNumOfVideosPerRowHandle();
  28.  
  29.     var ShowChannelIconNextToVideosOnHomePageHandle;
  30.     var ShowChannelIconNextToVideosOnHomePage = GM_getValue("ShowChannelIconNextToVideosOnHomePage", true);
  31.     SetShowChannelIconNextToVideosOnHomePageHandle();
  32.  
  33.     var LessenVideoTitleTopMarginOnHomePage = true;
  34.  
  35.     var screenWidth = screen.width;
  36.  
  37.     if(!!document.getElementById("early-body")) { //if old youtube
  38.         document.getElementById("content").setAttribute("style", "width: 99%;");
  39.     } else { //new youtube
  40.         addGlobalStyle(`
  41. 			ytd-app #page-manager > ytd-browse:not([page-subtype="playlist"]):not([page-subtype="home"]) ytd-two-column-browse-results-renderer.ytd-browse
  42. 			{
  43. 				box-sizing: border-box`+(ForceCSSOn ? `!important`:``)+`;
  44. 				width: calc(100% - 25px) !important;
  45. 				margin: 10px`+(ForceCSSOn ? `!important`:``)+`;
  46. 			}
  47.  
  48. 			/*channels page rules*/
  49. 			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
  50. 			{
  51. 				width: calc(100% - 20px);
  52. 			}
  53. 			/*for some reason the arrows sometimes dont show up, so now forcing them to*/
  54. 			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
  55. 			{
  56. 				opacity: 1;
  57. 				display: flex;
  58. 			}
  59.  
  60.  
  61. 			/*home page rules*/
  62. 			@media (min-width:` + (screenWidth - 300) + `px) {
  63. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  64. 				{
  65. 					--ytd-rich-grid-items-per-row:`+MaxNumOfVideosPerRow+` !important;
  66. 					--ytd-rich-grid-posts-per-row:`+MaxNumOfVideosPerRow+` !important;
  67. 					--ytd-rich-grid-movies-per-row:12 !important;
  68. 				}
  69. 			}
  70.  
  71. 			@media (min-width:` + (screenWidth - 600) + `px) and (max-width:` + (screenWidth - 301) + `px) {
  72. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  73. 				{
  74. 					--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 1) >= 3 ? (MaxNumOfVideosPerRow - 1) : 3))+` !important;
  75. 					--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 1) >= 3 ? (MaxNumOfVideosPerRow - 1) : 3))+` !important;
  76. 					--ytd-rich-grid-movies-per-row:12 !important;
  77. 				}
  78. 			}
  79.  
  80. 			@media (min-width:` + (screenWidth - 900) + `px) and (max-width:` + (screenWidth - 601) + `px) {
  81. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  82. 				{
  83. 					--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 2) >= 3 ? (MaxNumOfVideosPerRow - 2) : 3))+` !important;
  84. 					--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 2) >= 3 ? (MaxNumOfVideosPerRow - 2) : 3))+` !important;
  85. 					--ytd-rich-grid-movies-per-row:12 !important;
  86. 				}
  87. 			}
  88.  
  89. 			@media (min-width:` + (screenWidth - 1200) + `px) and (max-width:` + (screenWidth - 901) + `px) {
  90. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  91. 				{
  92. 					--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 3) >= 3 ? (MaxNumOfVideosPerRow - 3) : 3))+` !important;
  93. 					--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 3) >= 3 ? (MaxNumOfVideosPerRow - 3) : 3))+` !important;
  94. 					--ytd-rich-grid-movies-per-row:12 !important;
  95. 				}
  96. 			}
  97.  
  98. 			@media (min-width:` + (screenWidth - 1500) + `px) and (max-width:` + (screenWidth - 1201) + `px) {
  99. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  100. 				{
  101. 					--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 4) >= 3 ? (MaxNumOfVideosPerRow - 4) : 3))+` !important;
  102. 					--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 4) >= 3 ? (MaxNumOfVideosPerRow - 4) : 3))+` !important;
  103. 					--ytd-rich-grid-movies-per-row:12 !important;
  104. 				}
  105. 			}
  106.  
  107. 			@media (max-width:` + (screenWidth - 1501) + `px) {
  108. 				ytd-app #page-manager > ytd-browse[page-subtype="home"] ytd-two-column-browse-results-renderer.ytd-browse ytd-rich-grid-renderer
  109. 				{
  110. 					--ytd-rich-grid-items-per-row:`+(((MaxNumOfVideosPerRow - 6) >= 3 ? (MaxNumOfVideosPerRow - 6) : 3))+` !important;
  111. 					--ytd-rich-grid-posts-per-row:`+(((MaxNumOfVideosPerRow - 6) >= 3 ? (MaxNumOfVideosPerRow - 6) : 3))+` !important;
  112. 					--ytd-rich-grid-movies-per-row:12 !important;
  113. 				}
  114. 			}
  115. 		`);
  116.         console.log("Youtube Wide video container style added to DOM");
  117.  
  118.         if(!ShowChannelIconNextToVideosOnHomePage)
  119.         {
  120.             addGlobalStyle(`
  121. 				#avatar-link.ytd-rich-grid-video-renderer
  122. 				{
  123. 					display: none;
  124. 				}
  125. 			`);
  126.         }
  127.  
  128.         if(LessenVideoTitleTopMarginOnHomePage)
  129.         {
  130.             addGlobalStyle(`
  131. 				h3.ytd-rich-grid-video-renderer
  132. 				{
  133. 					margin-top: 6px;
  134. 				}
  135. 			`);
  136.         }
  137.  
  138.         if(FPPCompOn) {
  139. 			addGlobalStyle(`
  140. 				/*========== Fade++ Compatibility ==========*/
  141. 				ytd-app #page-manager > ytd-browse:not([page-subtype="playlist"]) {
  142. 					display: block;
  143. 				}
  144. 				ytd-app[guide-persistent-and-visible] #page-manager > ytd-browse:not([page-subtype="playlist"]) ytd-two-column-browse-results-renderer.ytd-browse
  145. 				{
  146. 					margin-left: 250px !important;
  147. 				}
  148. 			`);
  149.             console.log("Youtube Wide video container Fade++ compatibilty style added to DOM");
  150.         }
  151.     }
  152.  
  153.     /*=== load more videos for channel sections (experimental) ===*/
  154.     var lastCheckedURL = window.location.href;
  155.     URLChanged();
  156.     setInterval(function(){
  157.         if(lastCheckedURL != window.location.href)
  158.         {
  159.             lastCheckedURL = window.location.href;
  160.             URLChanged();
  161.         }
  162.     }, 200);
  163.  
  164.     var waitForArrows;
  165.     function URLChanged()
  166.     {
  167.         //console.log("-urlchanged-");
  168.         clearInterval(waitForArrows);
  169.         let expandedEls = document.getElementsByClassName("expanded-wwc");
  170.         //console.log("expanded els found: " + expandedEls.length);
  171.         let numRemoved = 0;
  172.  
  173.         //seems to always remove exactly half of them only, for some reason. So I guess do this until all have been removed
  174.         while(expandedEls.length > 0)
  175.         {
  176.             for(let x = 0; x < expandedEls.length; x++)
  177.             {
  178.                 if(!!expandedEls[x])
  179.                 {
  180.                     expandedEls[x].classList.remove("expanded-wwc");
  181.                     //console.log(++numRemoved + " cleared");
  182.                 }
  183.             }
  184.             expandedEls = document.getElementsByClassName("expanded-wwc");
  185.         }
  186.  
  187.         //console.log("-expandedclear-");
  188.         if(lastCheckedURL.includes("/user/") || lastCheckedURL.includes("/channel/"))
  189.         {
  190.             waitForArrows = setInterval(function(){
  191.                 //console.log("-searching...-");
  192.                 let arrowsRight = document.querySelectorAll("yt-horizontal-list-renderer:not(.expanded-wwc) > #right-arrow > ytd-button-renderer.arrow");
  193.                 let arrowsLeft = document.querySelectorAll("yt-horizontal-list-renderer:not(.expanded-wwc) > #left-arrow > ytd-button-renderer.arrow");
  194.                 if(!!arrowsRight && arrowsRight.length > 0 && !!arrowsLeft && arrowsLeft.length > 0)
  195.                 {
  196.                     //console.log("-found-");
  197.                     for(let i = 0; i < arrowsRight.length; i++)
  198.                     {
  199.                         if(!!arrowsRight[i] && arrowsRight[i].offsetParent !== null && !!arrowsLeft[i] && arrowsLeft[i].offsetParent !== null)
  200.                         {
  201.                             arrowsRight[i].parentElement.parentElement.classList.add("expanded-wwc");
  202.                             arrowsRight[i].click();
  203.                             arrowsRight[i].classList.add("clicked");
  204.                             arrowsLeft[i].click();
  205.                             arrowsLeft[i].classList.add("clicked");
  206.                         }
  207.                     }
  208.                 }
  209.             }, 200);
  210.         }
  211.     }
  212.     /*============================================================*/
  213.  
  214.     function SetFPPHandle() {
  215.         GM_unregisterMenuCommand(FPPHandle);
  216.  
  217.         FPPHandle = GM_registerMenuCommand("Fade++ Compatibility mode (" + (FPPCompOn ? "On" : "Off") + ") -click to change-", function(){
  218.             FPPCompOn = !FPPCompOn;
  219.             GM_setValue("FPPCompOn", FPPCompOn);
  220.             SetFPPHandle();
  221.  
  222.             if(confirm('Press "OK" to refresh the page to apply new settings'))
  223.                 location.reload();
  224.         });
  225.     }
  226. 	function SetForceCSSHandle() {
  227.         GM_unregisterMenuCommand(ForceCSSHandle);
  228.  
  229.         ForceCSSHandle = GM_registerMenuCommand("CSS important rule mode (" + (ForceCSSOn ? "On" : "Off") + ") -click to change-", function(){
  230.             ForceCSSOn = !ForceCSSOn;
  231.             GM_setValue("ForceCSSOn", ForceCSSOn);
  232.             SetForceCSSHandle();
  233.  
  234.             if(confirm('Press "OK" to refresh the page to apply new settings'))
  235.                 location.reload();
  236.         });
  237.     }
  238.     function SetMaxNumOfVideosPerRowHandle() {
  239.         GM_unregisterMenuCommand(MaxNumOfVideosPerRowHandle);
  240.  
  241.         MaxNumOfVideosPerRowHandle = GM_registerMenuCommand("[homepage] Max number of videos per row (" + MaxNumOfVideosPerRow + ") -click to change-", function(){
  242.             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)");
  243.             GM_setValue("MaxNumOfVideosPerRow", MaxNumOfVideosPerRow);
  244.             SetMaxNumOfVideosPerRowHandle();
  245.  
  246.             if(confirm('Press "OK" to refresh the page to apply new settings'))
  247.                 location.reload();
  248.         });
  249.     }
  250.     function SetShowChannelIconNextToVideosOnHomePageHandle() {
  251.         GM_unregisterMenuCommand(ShowChannelIconNextToVideosOnHomePageHandle);
  252.  
  253.         ShowChannelIconNextToVideosOnHomePageHandle = GM_registerMenuCommand("[homepage] Show channel icons next to videos (" + (ShowChannelIconNextToVideosOnHomePage ? "Yes" : "No") + ") -click to change-", function(){
  254.             ShowChannelIconNextToVideosOnHomePage = !ShowChannelIconNextToVideosOnHomePage;
  255.             GM_setValue("ShowChannelIconNextToVideosOnHomePage", ShowChannelIconNextToVideosOnHomePage);
  256.             SetShowChannelIconNextToVideosOnHomePageHandle();
  257.  
  258.             if(confirm('Press "OK" to refresh the page to apply new settings'))
  259.                 location.reload();
  260.         });
  261.     }
  262.  
  263.     function addGlobalStyle(css) {
  264.         var head, style;
  265.         head = document.getElementsByTagName('head')[0];
  266.         if (!head) { return; }
  267.         style = document.createElement('style');
  268.         style.type = 'text/css';
  269.         style.innerHTML = css;
  270.         head.appendChild(style);
  271.     }
  272. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址