Greasy Fork is available in English.

YouTube Row Fixer

Increase the videos per row on all page.

  1. // ==UserScript==
  2. // @name YouTube Row Fixer
  3. // @version 1.0.2
  4. // @author sapondanaisriwan
  5. // @description Increase the videos per row on all page.
  6. // @match https://www.youtube.com/*
  7. // @grant none
  8. // @license MIT
  9. // @run-at document-start
  10. // @icon https://i.imgur.com/I9uDrsq.png
  11. // @namespace https://greasyfork.org/en/users/1021085-sapondanaisriwan
  12. // @homepageURL https://github.com/sapondanaisriwan/youtube-videos-per-row-fix
  13. // @supportURL https://github.com/sapondanaisriwan/youtube-videos-per-row-fix/issues
  14. // @require https://update.greasyfork.org/scripts/465819/1289214/API%20for%20CustomElements%20in%20YouTube.js
  15. // ==/UserScript==
  16.  
  17. /*
  18. If you want to submit a bug or request a feature please report via github issue. Since I receive so many emails, I can't reply to them all.
  19. Contact: sapondanaisriwan@gmail.com
  20. Support me: https://ko-fi.com/sapondanaisriwan
  21. Support me: https://ko-fi.com/sapondanaisriwan
  22. Support me: https://ko-fi.com/sapondanaisriwan
  23. Support me: https://ko-fi.com/sapondanaisriwan
  24. Support me: https://ko-fi.com/sapondanaisriwan
  25. */
  26.  
  27. "use strict";
  28.  
  29. // Thanks so much to CY Fung (https://greasyfork.org/en/users/371179-cy-fung) for helping me.
  30. const settings = {
  31. VIDEO_PER_ROW: 6,
  32. SHELF_ITEM_PER_ROW: 9, // Max is 9
  33. HIDE_PROFILE: true,
  34. };
  35.  
  36. const target = "ytd-rich-grid-renderer";
  37.  
  38. const styles = {
  39. hideProfile: {
  40. id: "hide-ch-profile",
  41. css: `
  42. .channel-avatar.ytd-ghost-grid-renderer,
  43. #home-page-skeleton .channel-avatar {
  44. display: none;
  45. }
  46. ytd-rich-grid-media a#avatar-link {
  47. display: none;
  48. }
  49. `,
  50. },
  51. skeletonEle: {
  52. id: "unload-videos",
  53. css: `
  54. #home-page-skeleton .rich-grid-media-skeleton,
  55. #home-page-skeleton .rich-shelf-videos .rich-grid-media-skeleton.mini-mode,
  56. #home-page-skeleton #home-container-media .rich-grid-media-skeleton.mini-mode {
  57. min-width: calc(100% / ${settings.VIDEO_PER_ROW} - 1.6rem) !important;
  58. max-width: calc(100% / ${settings.VIDEO_PER_ROW} - 1.6rem) !important;
  59. }
  60. `,
  61. },
  62. };
  63.  
  64. // Function to remove DOM element
  65. const removeEle = (id) => {
  66. const ele = document.getElementById(id);
  67. ele && ele.remove();
  68. };
  69.  
  70. // Function to inject a style into the webpage
  71. const injectStyle = (id, css) => {
  72. // Remove before adding
  73. removeEle(id);
  74.  
  75. const style = document.createElement("style");
  76. style.type = "text/css";
  77. style.id = id;
  78. style.textContent = css;
  79. document.documentElement.appendChild(style);
  80. };
  81.  
  82. injectStyle(styles.skeletonEle.id, styles.skeletonEle.css);
  83. settings.HIDE_PROFILE &&
  84. injectStyle(styles.hideProfile.id, styles.hideProfile.css);
  85.  
  86. customYtElements.whenRegistered(target, (proto) => {
  87. proto.calcElementsPerRow = (a, b) => {
  88. return a === 194 ? settings.SHELF_ITEM_PER_ROW : settings.VIDEO_PER_ROW;
  89. };
  90. });