Bookmarklet for YouTube: Sort videos by length in videos tab

youtube-sort-videos-by-length.md

Bookmarklet for YouTube: Sort videos by length in videos tab

On channels in videos tab you can sort videos by:

• Most popular
• Date added (oldest)
• Date added (newest)

But you cannot sort by length. So I decided to create a bookmarklet to do it in ascending order.

It doesn't do any requests on its own, it just reorders already shown items on the videos tab. So if you'll scroll the page and YT will load more videos, newly added ones won't be sorted (and even old ones can be shuffled), you will need to rerun bookmarklet again.

Tested in Chrome (106), Edge (106), Firefox (106).

Installation

• Chrome: In bookmarks bar select Add page... from context menu, you'll get new window.
• Edge: In Bookmarks Toolbar select Manage favorites from context menu, in Favorites page click Add favorite, you'll get new window.
• Firefox: In favorites bar select New Bookmark... from context menu, you'll get new window.

Put whatever name you like, use the following javascript: oneliner as URL, and save.

Usage

Click bookmark when you're on videos tabs in YouTube, i.e. following kind of URLs:

• https://www.youtube.com/channel/CHANNEL/videos
• https://www.youtube.com/user/USER/videos
• https://www.youtube.com/c/NAME/videos
• https://www.youtube.com/NAME/videos

YouTube: Sort videos by length

javascript:(function(){l=[].map.call(document.querySelectorAll("span.ytd-thumbnail-overlay-time-status-renderer"),function(e){l=e.innerHTML.trim().split(":").map(function(t){return parseInt(t);}).reduce(function(p,c){return p*60+c;});return{a:e.parentElement.parentElement.parentElement,l:l};}).sort(function(a,b){return a.l-b.l;});ctn="YTD-CONTINUATION-ITEM-RENDERER";i=document.querySelector("#primary #items");if(i&&i.childElementCount){c=i.lastElementChild;if(c.tagName==ctn){c.remove();}else{c=null;}l.forEach(function(o){i.appendChild(o.a.parentElement.parentElement.parentElement);});if(c)i.appendChild(c);}else{i=document.querySelector("#primary #contents");c=i.lastElementChild;if(c.tagName==ctn){c.remove();}else{c=null;}l.forEach(function(o){i.appendChild(o.a.parentElement.parentElement.parentElement.parentElement.parentElement);});if(c)i.appendChild(c);}})()

(If you prefer descending order, then change a.l-b.l into b.l-a.l.)

Hope it will serve you well (until YT will change how the videos page is generated again).

If you know browser extensions or add-ons enhancing YT sorting features, then please share it.

EDIT (2019-09-08): I was notified that recently the original bookmarklet code was no longer working, so I fixed it.

EDIT (2022-10-24): During Sunday I realized it was not working on my Firefox on W11, seemingly it was seeing different HTML than other browsers were getting (my Firefox on W7 was not affected), so I played with it a bit and fixed it. Side effect: it works now on Chromium-based browsers too.

I'm subscribed to a channel that has this URL:
https://www.youtube.com/c/USER/videos

Can you make it work for this kind too?

@ashtanr, I would need to look into how watch later page is organized. It may or may not be easy to adapt existing bookmarklet.

@saucefrog, I believe that kind of URL was supported from the beginning. As long as you're in videos tab of some channel, then it doesn't matter using what URL you've reached it (/channel/CHANNEL/videos, /user/USER/videos, /c/NAME/videos, /NAME/videos).

Would it be possible to do something similar for YouTube playlists?

@Dagemelior Maybe? For sure it would be more complicated. When I'll have a need for such thing, then I may investigate it.

Bookmarklet got updated today. It works now on Chromium-based browsers too (well, at least mine browsers).

Can you make this an extension?

@IlyaTaidi Possibly I could, but I would need to put more effort into it than I'm willing to do, at least for now.
(Extensions have higher expectations than mere bookmarklets, and this bookmarklet works for its niche use, so there is no good motivation to put extra effort.)

I had some experience with browser extensions (NavigUp and some other ones that are no longer listed: NavigImage, NavigComments @ Hacker News, NavigComments @ LWN.net), but I would need to refresh my knowledge, investigate how to make them cross-browser with minimal effort (and avoiding code redundancy across browsers), and also learn about publishing outside of Google's Chrome Web Store, in Microsoft's Edge Add-ons (as I switched from Chrome to Edge last year) and Mozilla's Firefox Extensions.

Nice! This works well.

@IlyaTaidi Possibly I could, but I would need to put more effort into it than I'm willing to do, at least for now. (Extensions have higher expectations than mere bookmarklets, and this bookmarklet works for its niche use, so there is no good motivation to put extra effort.)

Youtube removed the filter to sort from oldest to newest video, so you could add that as well if you were to make an add-on.

Great work, truly appreciated 🙏 Can you give pointers on what to modify in the script to make it work for https://www.youtube.com/playlist?list=WL (watch later playlist)?

@saucefrog, on Videos tab for channels I see: Latest, Popular, Oldest, so it looks you can still sort from oldest to newest.
Am I overlooking something?

@ashtanr, @Dagemelior, @Ayenem
I spent some time on "Watch later" (https://www.youtube.com/playlist?list=WL). Sorting things just in the view wouldn't be hard, but it wouldn't affect the order actually stored in YT, so it would be not acceptable in my view. So more complex solution was needed. This was a good excuse to play a bit with parts of ECMAScript 2015 (ES6) and other JS things I did not in the past.
I came up with something that seems to work, but it's almost entirely new script, so I do not plan to update existing bookmarklet to support all cases, I will rather create a new one. Moreover, "Watch later" is kind of special kind of playlist, so it was relatively easy to make it work for user-owned playlists (except for "Liked videos", which seems to be not sortable at YT level). BTW I rarely use my old laptop, where YT used to provide different DOM, so atm I do not plan to support old YT DOM for new bookmarklet.

I didn't want to dig into simulating mouse dragging events (maybe in the future) or reverse engineering YT JS code, so my solution is based on moving elements to the bottom in the right order via popup menu, which makes it a bit slow - you need ~1s per item in the playlist, so it may take a while if you have longer playlists that you would like to sort...

As I wrote, it seems to work, but it may require some further polishing.

Is there anyone willing to beta test the new bookmarklet when it will be in shareable state?
If yes, then please reach to me via mail, and I will share with you beta version when it will be available.

Oh, I was so focused on "Watch later" that I have not realized my old bookmarklet for videos tab is actually no longer working... :)
I will have to fix it later too.

Script works!