Youtube UI Fix

Moves the controls under the video and makes the UI look like it was before august 2015

< Feedback on Youtube UI Fix

Review: Good - script works

q1k
§
Posted: 2015-10-18
Edited: 2015-10-18

Needs a few adjustments


In the settings menu the 'go back button' is all the way to the top,
and I think it would be better if it is on the bottom. So that there is no much mouse movement.

Also when hovering the menu item, make the background slightly brighter like #333;

And why does the scroll bar appear there?

Roy192Author
§
Posted: 2015-10-18
Edited: 2015-10-18

In the settings menu the 'go back button' is all the way to the top,
and I think it would be better if it is on the bottom. So that there is no much mouse movement.

At first I thought this would be impossible (or at least very difficult). But thanks to flexboxes, it was actually very easy (a bit of css to change the order around).

I did make it an option (default off), so you'll have to enable it in the settings:
https://www.youtube.com/account_playback


Also when hovering the menu item, make the background slightly brighter like #333;

Done, but I made it a little bit darker than #333333 (#2D2D2D).


And why does the scroll bar appear there?

That a bug is Youtube's fault. 6 weeks ago, I told them about this, but it's still not fixed. But I managed to fix it anyway (by changing the line-height from 1.1 to 1.0).

It may still appear if your player is 360px or smaller, or on videos with more than 7 quality options (for example 4k videos). We'll have to wait for Youtube to really fix it.

q1k
§
Posted: 2015-10-18
Edited: 2015-10-18

In the settings menu the 'go back button' is all the way to the top,
and I think it would be better if it is on the bottom. So that there is no much mouse movement.
At first I thought this would be impossible (or at least very difficult). But thanks to flexboxes, it was actually very easy (a bit of css to change the order around).

I did make it an option (default off), so you'll have to enable it in the settings:
https://www.youtube.com/account_playback

Firstly, thanks for the update.

Second, I don't know much about flexboxes, so the way I did that is by rotating the elements:
as so
.ytp-panel, .ytp-panel-header, .ytp-panel-content {
transform: rotate(180deg);
}
/* and move the border to the top */
.ytp-panel-header {
border-bottom: none;
border-top: 1px solid #444;
}
But I trust you've made the better choice


I also did do the brighter bg on hover,

but i just couldn't get rid of the scrollbar (please note that just simply hiding the scroll-bar isn't a viable option, due to the reasons you gave above.).
Every option I tried broke the whole setting menu.


Oh, and the options seem to be floating quite above the button (as if the controlbar is bigger than it actually is.)
So will adding something like this, fix the problem/:
.ytp-settings-menu {
bottom: 30px;
}



Oh, and the biggest thing I like about the script, is that it also works on flash (not all feature of course, but the most important one, show the damn controlbar :D ).

Roy192Author
§
Posted: 2015-10-18

Firstly, thanks for the update.

Second, I don't know much about flexboxes, so the way I did that is by rotating the elements:
as so
.ytp-panel, .ytp-panel-header, .ytp-panel-content {
transform: rotate(180deg);
}
/* and move the border to the top */
.ytp-panel-header {
border-bottom: none;
border-top: 1px solid #444;
}
But I trust you've made the better choice

That is a very creative solution, I have to try this out...

It does work, but for some reason the text jumps one pixel up shortly after opening the settings menu. It might be a decent alternative for browsers that don't support flexboxes.


Oh, and the options seem to be floating quite above the button (as if the controlbar is bigger than it actually is.)
So will adding something like this, fix the problem/:
.ytp-settings-menu {
bottom: 30px;
}

I checked that, and there is normally a gap of 9 pixels between the progressbar and the menu (and the tooltips as well). With my script it's 14px, I've lowered it a bit so it's now also 9 pixels.


Oh, and the biggest thing I like about the script, is that it also works on flash (not all feature of course, but the most important one, show the damn controlbar :D ).

Actually, Youtube never updated their flash version to the new UI. It looks like the old UI, with or without my script.

q1k
§
Posted: 2015-10-18
Edited: 2015-10-18
Oh, and the biggest thing I like about the script, is that it also works on flash (not all feature of course, but the most important one, show the damn controlbar :D ).
Actually, Youtube never updated their flash version to the new UI. It looks like the old UI, with or without my script.

Yeah, it isn't transparent, but it is hiding the controls, which I hate.

Until recently I was using Youtube Center by YePpha, but his script hasn't been updated a long time, so I had to look for an alternative.
And I found this. Plus along with YouTube+ it did the job just fine, not exactly what I was looking for but close enough.
I was on Palemoon until a couple of days ago using this script on the flash player,
but now with Seamonkey, it may be better to just use the html5 player afterall, since it is auto enabled by default anyway.

I think I read somewhere that Youtube is planning to completely remove the flash player.
I guess there is no way to convince them otherwise. I mean, Whatever change google made they haven't asked the users if they would actually like it, and plus I really don't understand why they don't have an option somewhere to use another UI.

q1k
§
Posted: 2015-10-19
Edited: 2015-10-19

OK, just noticed a black bar on top about 17px. And basically pushes the whole video down, behind the controls..
This happens when Youtube+ script is enabled

Any way to fix it?
Happens on Seamonkey, chrome. I haven't tested on other browsers.

Roy192Author
§
Posted: 2015-10-19
OK, just noticed a black bar on top about 17px. And basically pushes the whole video down, behind the controls..
This happens when Youtube+ script is enabled

Any way to fix it?
Happens on Seamonkey, chrome. I haven't tested on other browsers.

I think it's fixed now, I had to unset the height of the video container. This might break something else, but there's no way for me to know that now. If someone has a problem, that will be the first thing I'll check.

There's also a problem with the smaller player that appears when you scroll down to the comments. The player is 35px too small there. The only way to fix it, is to edit the youtube+ script itself and increase the size by 35px (see screenshot). This is only necessary if you actually use the "Player always visible when reading comments" option.

q1k
§
Posted: 2015-10-19
Edited: 2015-10-19
OK, just noticed a black bar on top about 17px. And basically pushes the whole video down, behind the controls..
This happens when Youtube+ script is enabled

Any way to fix it?
Happens on Seamonkey, chrome. I haven't tested on other browsers.
I think it's fixed now, I had to unset the height of the video container. This might break something else, but there's no way for me to know that now. If someone has a problem, that will be the first thing I'll check.

There's also a problem with the smaller player that appears when you scroll down to the comments. The player is 35px too small there. The only way to fix it, is to edit the youtube+ script itself and increase the size by 35px (see screenshot). This is only necessary if you actually use the "Player always visible when reading comments" option.

Thanks for the response and the update,
and no I don't use the "Player always visible when reading comments" option, so no problem there, for me at least. But I will make the edit anyway :)

Post reply

Sign in to post a reply.