Number of videos on a row (feed)

[armync]

Is your feature request related to a problem? Please describe. YouTube has a layout of 3 videos per row on the subscription feed page.

Describe the solution you'd like This extension should be able to control how many videos to be shown on a row and control the size.

[VampireChicken12]

@ArmynC I will look into this. no promises that it will be implemented quick. I have been busy

[armync]

Also, an off-topic reference for Stylus extension:

[VampireChicken12]

Also, an off-topic reference for Stylus extension:

thank you. that may just make the feature easy to implement

[armync]

There is a complete code with more vars.

@author       Roki_100 & jiraph
@preprocessor stylus
@var          number rows "Number of video rows" 6
@var          checkbox thumbs "Customize thumbnail size" 0
@var          range -width "Thumbnail Size" [1284, 1000, 2000, 'px']
@var          checkbox fullwidth "Force fullscreen width grid" 0
@var          checkbox thumbradius "Customize thumbnail corner radius" 0
@var          range -radius "Thumbnail Corner Radius" [12, 0, 12, 'px']
@var          checkbox channelPage "Activate on channel page" 1
@var          checkbox feedPage "Activate on subscriptions page" 0
@var          checkbox homePage "Activate on home page" 0
@var          checkbox nukeShorts "Nuke Shorts on feed&home (Fixes issues)" 0
@var          checkbox userscript "Enable UserScript Compatibility layer support" 0
@var          number shortsrows "Number of shorts rows (Userscript only)" 8
==/UserStyle== */

exec() {
    ytd-rich-grid-renderer {
        --ytd-rich-grid-items-per-row: rows !important;
        --ytd-rich-grid-posts-per-row: rows !important;
    }

    #contents>ytd-rich-grid-row,
    #contents>ytd-rich-grid-row>#contents {
        display: contents;
    }

    ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block {
        font-size: 1.2rem;
        line-height: 1.8rem;
        max-height: 3.6rem;
    }

    #video-title.ytd-rich-grid-media {
        font-size: 1.4rem;
        line-height: 2rem;
        max-height: 4rem;
    }

    #header.ytd-rich-grid-renderer {
        width: 100%;
    }

    ytd-rich-item-renderer {
        margin: 8px 2px !important;
        margin-bottom: 24px;
        margin-right: 4px;
        margin-left: 0px;
        width: calc(100%/var(--ytd-rich-grid-items-per-row) - 4px);
    }

    .ytd-two-column-browse-results-renderer {
        padding-inline: 6px;
    }

    if thumbs {
        ytd-two-column-browse-results-renderer.style-scope {
            max-width: -width !important;
        }
        
        ytd-two-column-browse-results-renderer.grid-6-columns {
            width: 100% !important;
        }
    }

    if thumbradius {
        ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before {
            border-radius: -radius;
        }
    }

    if fullwidth {
        ytd-two-column-browse-results-renderer.grid:not(.grid-disabled):has(ytd-rich-grid-renderer:not([is-shorts-grid])) {
            max-width: 100% !important;
            width: 100% !important;
        }
    }
}

@-moz-document regexp("^(https?://)(?:www.)?youtube.com/(?:@)?(?:[\w.-]+|(?:c|channel)/[\w-]+)/videos(\?.*)?$") {
    if channelPage {
        exec()
    }
}

@-moz-document regexp("^(https?://)(www\.)?youtube\.com/feed/subscriptions(\?.*)?$") {
    if feedPage {
        exec()
    }

    if nukeShorts {
        [page-subtype="subscriptions"] {
            ytd-item-section-renderer,
            ytd-rich-section-renderer,
            ytd-grid-video-renderer, ytd-rich-item-renderer {
                &:has(a[href^="/shorts/"]) {
                    display: none;
                }
            }
        }
    }

    if userscript {
        :root {
            --rowsfix-by-roki-userscript-rows: rows;
            --rowsfix-by-roki-userscript-shortsrows: shortsrows;
        }
    }
}

@-moz-document regexp("^(https?://)(www\.)?youtube\.com/(/\?.*)?$") {
    if homePage {
        exec()
    }

    if nukeShorts {
        [page-subtype='home'] ytd-rich-section-renderer:has(a[href^="/shorts/"]) {
            display: none;
        }
    }

    if userscript {
        :root {
            --rowsfix-by-roki-userscript-rows: rows;
            --rowsfix-by-roki-userscript-shortsrows: shortsrows;
        }
    }
}

alt: https://github.com/Krishood/UserStyles/blob/main/YouTube/More_Thumbnails_Per_Row.user.css

[VampireChicken12]

@ArmynC thank you for your comment I would have to adjust this to work with plain css the extension doesn't use stylus.

[VampireChicken12]

@ArmynC I'm going to look into implementing this later today Friday September 27th

[Seltonu]

Would also like to request this :) Youtube has slowly been decreasing the number of videos shown on the homepage, I now only see 3 per row (6 total) on my homepage. I would really like to increase to ~5 per row so I can much more quickly scan for content I want to watch

[VampireChicken12]

@Seltonu for now until I implement this feature you can use this CSS in the custom CSS editor to accomplish this.

ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 6 !important;
      --ytd-rich-grid-posts-per-row: 6 !important;
}
ytd-rich-section-renderer:nth-of-type(1),
ytd-rich-section-renderer:nth-of-type(2) {
      display: none;
}

Change "6" to the desired amount of videos you want per row, if you set the number too high it can make titles hard to read

[VampireChicken12]

@Seltonu thank you for your review on Firefox Add-ons

[Seltonu]

@VampireChicken12 wow you're quick haha that worked, thank you! :D

I really appreciate it, is there somewhere I can donate to the project?

[VampireChicken12]

@VampireChicken12 wow you're quick haha that worked, thank you! :D

I really appreciate it, is there somewhere I can donate to the project?

You're welcome https://ko-fi.com/youtubeenhancer

[VampireChicken12]

@Seltonu thank you so much for the donation it's greatly appreciated

[VampireChicken12]

@Seltonu is there anything you would like to request for the extension?

[Seltonu]

@VampireChicken12 I think the only other thing I feel is missing is #248 the Pop-Out mini player when reading comments, I haven't found another extension to do that yet. "Enhancer for Youtube" (different extension) did it but is no longer developed for Firefox and I've been missing it since.

Otherwise I'm thoroughly impressed with how many great features this extension has! I was using 2 other extensions and replaced them with this one, I love it! Great work

[VampireChicken12]

@VampireChicken12 I think the only other thing I feel is missing is #248 the Pop-Out mini player when reading comments, I haven't found another extension to do that yet. "Enhancer for Youtube" (different extension) did it but is no longer developed for Firefox and I've been missing it since.

Otherwise I'm thoroughly impressed with how many great features this extension has! I was using 2 other extensions and replaced them with this one, I love it! Great work

I'll try to work on that, the most I've done was work on a mini preview when hovering over a timestamp #675 Thank you

[VampireChicken12]

I have a slight adjustment to the CSS I gave you @Seltonu until 14490c9 is merged and released this fixes the gaps in the videos without hiding latest posts I noticed the previous CSS was doing that sometimes. Also it fixes the left margin on the videos being too much which causes the videos to get too close to the right side of the page like in the attached image

ytd-rich-grid-renderer {
      --ytd-rich-grid-items-per-row: 6 !important;
      --ytd-rich-grid-posts-per-row: 6 !important;
}

ytd-rich-section-renderer:has([is-shorts]) {
      display: none;
}

ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
      margin-left: 8px !important;
}

[Seltonu]

@VampireChicken12 much appreciate! :) This seems to be working perfectly with no gaps

[VampireChicken12]

@VampireChicken12 much appreciate! :) This seems to be working perfectly with no gaps

you're welcome