YouTube Googler

By MooGoo Last update May 11, 2009 — Installed 55,123 times.

If I didn't know any better...

Subscribe to If I didn't know any better... 8 posts, 2 voices

StrawTurkey User

I'd say that, in the last couple hours, YouTube broke what you fixed yesterday.

It could just be me, and my settings, but I was modifying your code around, and it was working. Now it isn't working, and, in the mean time, I don't think I've done anything.

I even went and reverted to your newest, and non-modified, form. The video won't resize and the settings icon is missing again.

I really appreciate the update. I hope it's just me with the problem.

MooGoo Script's Author

Sometimes I hate youtube...

Fixed it, but this time I threw a try catch block around the entire section of code, so next time youtube frells up their page, hopefully, things will just look funny instead of breaking.

I'm curious though, what modifications were you making?

StrawTurkey User

I had done three things. Due mostly to the way YouTube has changed things from a few months back (things that used to be okay). In this case, I lost the code that I had figured out, so, as of yesterday, I was still experimenting, and had only perfected two of the three things I change. I was going to write it out to share with you, but I never completed it.

One thing I do, for Firefox, at least, is to make sure that the horizontal scrollbar at the bottom of the sidebar disappears, which is adding overflow: -moz-scrollbars-vertical;\ to div#ovSide, instead of overflow: auto;\.

The other is to put a determined width to the "Related Videos" and a hidden overflow, because, as of a month or two ago (or maybe with their HD interface changes), YouTube changed it from the way it had been with sort of a single entry per "line" of video stacks, to overflowing into other lines, so that the video image might be one line, and then the text under it, to a couple of lines, depending on how squished it was. I know that's not very well explained, but here's the code I put in:

	#watch-related-videos-panel {\
	width: 360px;\
	overflow: hidden;\

Normally, if the width is less, let's say you make the sidebar 100 pixels, suddenly you'll get a lot of white space, and a lot of distance between each video entry as it tries to squish it together. In this case, if you extend the sidebar wider than 360px, you'll get a box with a sidebar that sticks to the left, but that isn't really a problem. When it's less than 360px, you lose the scrollbar, but things don't try to squish, so you still have your stacks of video images at the same distance, and you can just use the scrollwheel to get up and down.

The third thing I was working on, that breaks the easiest, and broke with the last YouTube code change (whatever number of days ago), was one that hides the overflow of the #masthead tab bars (Home | Videos | Channel | Community). Right now, unmodified, those will take up several lines if the sidebar is squished far enough, and I like to have those at the top, so, unmodified, that squishes all the other info even lower.

I'd fixed it and thought I'd saved a backup, but on installing the new one, I lost the backup. (It was broken as of YouTube's changes anyway.) I think it was done by modifying overflow: hidden into some section of the masthead and userbar.

So, those three things. I was going to make a thread to tell you how I'd perfected everything, but, in this case, with the code breaking, I'm still figuring it out. Thanks for modifying it again, though. I'll let you know what I can figure out.

StrawTurkey User

I'll list out the order I've made things, now that I'm looking at them. I find it works pretty well:

1. #masthead
2. #watch-channel-vids-div
3. #watch-ratings-view
[]. (deactivated) #watch-channel-videos-panel
5. #quicklistDiv
6. #watch-vid-title
7. #watch-related-videos-panel
8. #watch-video-quality-setting
9. #watch-comments-stats
[]. (greyed-out) #non-logo-masthead
11. #watch-actions-area

I like having #masthead at the top, but currently, when the sidebar is too narrow, and every bit takes up a line, that's about all you see. I'd had it to a hidden overflow, I think, (I'm not sure if it was a set width, say 600px), which meant it would stay on a single line, and the elements would just disappear if the sidebar was too narrow.

So I'm working on what I can figure out. I threw in the two code changes I made, and those still work right. I was on my way to figuring out the #masthead deal, before YouTube made their adjustment again.

StrawTurkey User

Part one of the third thing (keeping the top #masthead from splitting into too many pieces) is adding into #masthead div.user-info:

	width: 500px;\
	overflow: hidden;\

It seems like I had an easier way to do it the first time, but this seems to work. I'm still figuring out what to do about the "Home | Videos | Channel | Community" bar.

StrawTurkey User

I guess adding in:

#masthead div.master-sprite {\
	overflow: hidden;\
	width: 500px;\
seems to do it.

And, actually, I decided to get rid of the tiny top bar (with Account Name, and Quicklist, and Help, and SignOut), by putting display: none;\. It doesn't really do much for me. (Maybe there could be an option to remove it?)

I'll try to make a couple screenshots for you, to show you how the code changes things. As always, your script is still the awesomest GreaseMonkey script I use. I couldn't go back to "regular" YouTube anymore, and I don't know how the average person manages to do it. And I really appreciate you keeping up with all their changes and breaking of things. And I've picked up little bits of JavaScript in the mean time, too.

- StrawTurkey

StrawTurkey User

I put together an animation of the two scrolling sidebars in action, one modified (on the right), and the unmodified one on the left: (648px × 540px, approx. 1.2MB)

As well as separately:
Unmodified (no changes):
Modified (my changes):

MooGoo Script's Author

That's a neat animation.

I see the problem. I guess there is two sides to this one. In the way it currently is, it looks like crap when the sidebar is real skinny, but all the links and buttons and what not are still accessible. With your modifications, things look fine at any sidebar width, but you loose access to clipped elements. Of course you can easily regain access by just making the sidebar bigger temporarily, so the way that looks better might be preferable. This is probably more important for smaller non widescreen monitors, I have the luxury to keep the sidebar pretty wide on a 1920x1200 screen.

That tiny top bar used to be toggleable in the Sidebar settings thing, then YouTube went and stuck it inside #masthead, so now you cannot hide it individually. It should be an easy fix, and I should probably remove '#non-logo-masthead' from the list as it does not exist anymore.