Greasy Fork

Title bar missing

Would be nice to have the title bar appear on when hovering the player.
Please add an option whether to hide it or not.


CSS UPDATED IN A LATER POST


You may need to add this, to make it a bit smaller:

.ytp-tooltip.ytp-top {
top: 30px;
}
.ytp-chrome-top .ytp-button {
height: 26px;
padding-top: 2px;
}
.ytp-title-link {
padding-top: 6px;
}
.ytp-title {
font-size: 125%;
}



CSS UPDATED IN A LATER POST


You could also remove the bottom gradient block, which I find odd lookin
.ytp-gradient-bottom {display: none;}


CSS UPDATED IN A LATER POST


EDIT:
This might be needed too

#movie_player:hover .ytp-gradient-top, #movie_player:hover .ytp-chrome-top {
display: block;
}

#movie_player.ended-mode:hover .ytp-gradient-top, #movie_player.ended-mode:hover .ytp-chrome-top, .ended-mode .ytp-gradient-top, .ended-mode .ytp-chrome-top {
display: none;
}


CSS UPDATED IN A LATER POST

I've added an option and your css, but I've disabled it when youtube is in full-screen (as there is no way to not hover the video in full-screen).

So it's not possible to hide it, if mouse is not moving?

Also, the mouse pointer is auto hidden in full-screen, so technically it's not hovering.
So this shouldn't be an issue?

So it's not possible to hide it, if mouse is not moving?

Also, the mouse pointer is auto hidden in full-screen, so technically it's not hovering.
So this shouldn't be an issue?

You can try for yourself: https://copy.com/ZrZNZb9V2a1GmKBb

It didn't work for me.

it disappears for me

But I had to add big player (fullscreen) specific so the text wouldn't be so big

Here's the complete CSS I have in stylish:


#movie_player:hover .ytp-gradient-top, #movie_player:hover .ytp-chrome-top {
display: block !important;
}

#movie_player.ended-mode:hover .ytp-gradient-top, #movie_player.ended-mode:hover .ytp-chrome-top, .ended-mode .ytp-gradient-top, .ended-mode .ytp-chrome-top {
display: none !important;
}

.ytp-tooltip.ytp-top {
top: 30px !important;
}
.ytp-chrome-top .ytp-button {
height: 26px !important;
padding-top: 2px !important;
}
.ytp-title-link, .ytp-big-mode .ytp-title-link {
padding-top: 6px !important;
}
.ytp-title {
font-size: 125% !important;
}

.ytp-gradient-bottom {
display: none !important;
}

.ytp-big-mode .ytp-title {
font-size: 100% !important;
}

.ytp-big-mode .ytp-chrome-top .ytp-button {
height: 30px !important;
}

.ytp-big-mode .ytp-tooltip.ytp-top {
top: 40px !important;
}

.ytp-gradient-top {
background-size: auto 60px !important;
}

.ytp-big-mode .ytp-gradient-top {
background-size: auto 80px !important;
}



it disappears for me

Do the controls disappear as well? I think you have the autohide controls in full-screen option on.

I might make it so that it will work in full-screen, but only when that autohide controls option is turned on.

yes the controls go down too.

http://oi67.tinypic.com/16i8tad.jpg

hey, thanks for the update and adding this.


Anyway, it does show the title, but the background gradient is not there, and in fullscreen some buttons are bigger than the other and text is ridiculously down from the top.

I fixed all that with the CSS I gave in my previous post, you either have not added all of it or you may have not added !important, I can't check now.

hey, thanks for the update and adding this.


Anyway, it does show the title, but the background gradient is not there, and in fullscreen some buttons are bigger than the other and text is ridiculously down from the top.

I fixed all that with the CSS I gave in my previous post, you either have not added all of it or you may have not added !important, I can't check now.

Better now?

you will have to add the !important, because the gradient background is missing

the buttons are the right size and position though

I actually removed an !important, it should work now.

it's ok now,

but the watch later popup title is showing in the bottom and not the top. (watch later as ....)
is it possible to make this also work good?

.ytp-tooltip.ytp-top {top: 30px !important;}
and for fullscreen
.ytp-big-mode .ytp-tooltip.ytp-top {top: 40px !important;}


maybe you could make it if I have the "Add the watch later button to the controls" disabled and title bar enabled, show the tooltip up there?

I've made it only appear on the bottom if the "Add the watch later button to the controls" is enabled. If it is disabled, it will be whatever youtube set it to be.

well, that's bottom again I guess. So annoying

hey, i just noticed one thing
looks like youtube has made the background gradient the same image for both bottom and top

so we will need this now
.ytp-gradient-top {
background-size: auto 60px !important;

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABjCAYAAABaKWrYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAAtUlEQVQoU3XEz0fDcQAA0O9av7dpKpUlaTJJRhIzRhKJGLNDIqKIyBhjOkwk2SGJJBbJtNhfub3Lhw57hxcN9fWnnn7V1Y++9aWOPvWhd73pVS9q61lPetSDWrpXUw3VVdOdbnWja13pUhc615mqqqisU53oWEc61IFKKqqgfe1pV3ntaFtbymlTWW1oXWtaVUYrWtaSFrWgeaU1F0opqURoVjOa1lRoMjSh8VB8VGP/i40oigaG+Bi47+GMyAAAAABJRU5ErkJggg==) !important;
}



.ytp-big-mode .ytp-gradient-top {
background-size: auto 80px !important;

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABjCAYAAABaKWrYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAAtUlEQVQoU3XEz0fDcQAA0O9av7dpKpUlaTJJRhIzRhKJGLNDIqKIyBhjOkwk2SGJJBbJtNhfub3Lhw57hxcN9fWnnn7V1Y++9aWOPvWhd73pVS9q61lPetSDWrpXUw3VVdOdbnWja13pUhc615mqqqisU53oWEc61IFKKqqgfe1pV3ntaFtbymlTWW1oXWtaVUYrWtaSFrWgeaU1F0opqURoVjOa1lRoMjSh8VB8VGP/i40oigaG+Bi47+GMyAAAAABJRU5ErkJggg==) !important;
}

Just another thing
can you make the top buttons a bit bigger in fullscreen./ they seem too small for me.
And if possible make them brighter as well.

That's all.
Thank you.

And there is a problem with the embeded videos.
The title bar doesn't disappear, also there is no gradient background there.

There was also another problem with embedded videos, the videos were too big (and got covered by the controls). But I've fixed that.

I've also disabled the show title on hover option in embedded videos (I see no way to get that to work).

And the buttons are a bit bigger and brighter in full-screen now.

but there is title bar in embeded videos by default

so maybe just simply make it smaller instead? (no display:block), also the background. don't forget the background. :)

Like this: https://copy.com/C17aCp9cNsUQhDbh?

Isn't it a bit annoying to always have that background with the text?

something like that, though text is a bit too small in normal mode, but that's not the issue there.

Seems like the title bar again stays even if mouse exits,
also i noticed youtube adds a class ytp-autohide for a a split second, to hide the controls/bars.
But after ytp-autohide class disappears the title bar it back too.

You will have to add non hover and hover for the embeded videos

@-moz-document url-prefix("www.youtube.com/embed/"){
#player:hover .ytp-gradient-top, #player:hover .ytp-chrome-top {
display: block !important;
}
#player .ytp-gradient-top, #player .ytp-chrome-top {
display: none !important;
}

#player :not(.playing-mode) .ytp-gradient-top, #player :not(.playing-mode) .ytp-chrome-top {
display: block !important;
}

}

I didn't want to open a new discussion for this again, so here goes:

Let me begin by saying that this whole feature (Have the title show when hovering over the video (doesn't work in embedded mode), doesn't work properly now. The css is all messed up. And there is also a problem with another class that is being applied to #movie_player the .ytp-autohide, which should hide the title and controls. The problem caused by the script is that .ytp-autohide is immediately erased when it is added, thus preventing the title bar from being hidden. That is why you had to add all that css to just be able to somehow (buggily) show and hide it.

And also, youtube has the title bar disabled by default with adding this class ytp-hide-info-bar to #movie_player. This class is removed when in fullscreen (making the title bar visible), and added back again when exiting fullscreen (except in embeded videos, I think).

_ So the other (I think better) solution would be to add a listener and prevent ytp-hide-info-bar from appearing, and let everything else do it's course (this should make the title bar able to appear in embedded videos too, I believe).

In the meantime, I'm gonna come up with some css to make the title bar look like it was before the transparent player (the way it still is on the flash player).

EDIT: Here's the CSS

/* remove the gradient background */
.ytp-gradient-top {
  display: none !important;
}
/* when opening a new video the title bar will appear
  if .ytp-hide-info-bar is not present */
   /* so if not hovered hide the title bar */
#movie_player.playing-mode:not(:hover) .ytp-chrome-top {
  opacity: 0;
  /*display: none;*/
}
/* make the title bar smaller and smaller buttons as well*/
.ytp-chrome-top {
  right: 0 !important;
  left: 0 !important;
  padding-left: 3px !important;
  padding-right: 12px !important;
  background: #151515 !important;
/* if you think a transparent background would be better, then do that */
  line-height: 30px !important;
  height: 30px !important;
  font-size: 15px !important;
}
.ytp-chrome-top * {
  line-height: 30px !important;
  height: 30px !important;
  padding-top: 0 !important;
  font-size: 100% !important;
}
/* a little fix for the buttons on the right */
.ytp-chrome-top .ytp-chrome-top-buttons {
  right: 2px;
}

This is the simplest I could make it, and should do the job just fine. It's the only css you will need for this feature, as well as the listener to remove that other class.

I also noticed other css applying to the gradient-top and chrome-top, so you might wanna clean up some of it.

Regards.

I rewrote the script, and it now tries to remove the ytp-hide-info-bar every second, and does things like you suggested. Which is much better, and even works with embedded videos. Although it's slightly different than before because it now shows the title at the start of the video, but that shouldn't be a problem.

and the css for making it look more like the old way, looks decent (but would probably be better off in a separate user-style).

Although it's slightly different than before because it now shows the title at the start of the video, but that shouldn't be a problem.

With the css in the above post, the problem is resolved (line 8,9). But on embedded videos the title will still be visible for a few seconds. This is youtube's fault btw.

I have updated the css paddings and margins, so it looks a little bit better now.