Привет, незнакомец!

Похоже, вы здесь новенький. Чтобы принять участие, нажмите одну из кнопок ниже!

Title bar missing

Скрипт: Youtube UI Fix
q1kq1k
отредактировано November 2015 Раздел: Обсуждения скриптов SeaMonkey
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).
  • q1kq1k
    отредактировано November 2015 Chrome
    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?
  • q1k написал:

    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.
  • q1kq1k
    SeaMonkey
    it disappears for me
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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; }
  • q1k написал:

    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.
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    yes the controls go down too.

    imagehttp://oi67.tinypic.com/16i8tad.jpg
  • q1kq1k
    SeaMonkey
    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.
  • q1k написал:

    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?
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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.
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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.
  • q1kq1k
    SeaMonkey
    well, that's bottom again I guess. So annoying
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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; }
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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.
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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.
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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?
  • q1kq1k
    SeaMonkey
    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.
  • q1kq1k
    отредактировано November 2015 SeaMonkey
    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; } }
  • q1kq1k
    отредактировано September 2016 Firefox

    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.

  • отредактировано September 2016 Firefox
    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).
  • q1kq1k
    отредактировано September 2016 Firefox
    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.

  • q1kq1k
    отредактировано September 2016 Firefox

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

Войдите или Зарегистрируйтесь чтобы комментировать.