Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Name of the video should appear on the top

About: FYTE /Fast YouTube Embedded/ Player
q1kq1k
edited February 2017 in Script Discussions Firefox

First of all let me just say this:
This is the only script that can effectively handle youtube embeded videos, and thus making the pages load faster. (or at least it is from what I could find.)

Now onto the business.
I have some suggestions to make it a little bit better.

1. It would be awesome if you could make it so the name of the video appear on the top of the image there. Maybe also add a dark background or something to make it easier to read.

2. I think that it will be even easier to notice the vid if the play button was colored by default. Something like this: :root .instant-youtube-container:hover .ytp-large-play-button-svg { fill: #af0000; }
.instant-youtube-container .ytp-large-play-button-svg { fill: #ef0000; }

3. And adding some background to the text will make it easier to read as well. ("Watch on YouTube", "Play directly...")

Thank you very much.

«13456789

Comments

    1. Good idea.
    2. I'm using the same style as the original embedded player. It works for everybody apparently, although you're right and I even tried the red button initially.
    3. The text currently displayed is not important, I never click it aside from the initial setup and testing, so I'll only add a translucent black bar under the title.
  • q1kq1k
    edited June 2016 Firefox
    Thank you, I'd appreciate that.

    Also one other thing, I'm also using Youtube+ and YouTube New UI fix.
    It's working fine with both of them, but from the UI fix the video needs to be 35 pixels larger (because of the control bar being always visible).
    So if you could somehow make that happen, would be great.
    If you decide not to do anything about it, I'd understand.


    EDIT:
    Also this script seems to mess around with youtube channel featured videos.. (no background, small play button,...). Or is it just something at my end...
  • @q1k, please try the new version before I update it for everyone: http://p.ip.fi/G2XT

  • Also this script seems to mess around with youtube channel featured videos

    Screenshots with and without my userscript, and a channel url, please.

  • q1kq1k
    edited June 2016 Firefox
    Hmmm, now I have to click play twice...

    Also on this website, the embed does not get generated

    wOxxOm said:

    q1k said:


    Also this script seems to mess around with youtube channel featured videos

    Screenshots with and without my userscript, and a channel url, please.
    Sorry, my bad.. That was the flash player being all weird again. I have disabled the flash player and now that video starts automatically, which I don't like. But oh well.., nothing I can do there.

  • edited June 2016 Chrome

    Hmmm, now I have to click play twice...

    Can't reproduce. Maybe you have an old version of my userscript. The idea was simply to overwrite the old code with the new one in Greasemonkey's script editor.

    Also on this website, the embed does not get generated

    They use a pretty retarded custom loader so I've just added an exception: such cases won't be processed at all: http://p.ip.fi/LXlM

  • q1kq1k
    edited June 2016 Firefox
    One more thing I noticed,
    The title bar from the script doesn't disappear...

    Just so you would know the script I linked above "Youtube new UI fix", removes the default title bar. So with this script adding it's own title bar is great :), but problem is that it doesn't disappear when not hovering (video playing btw.. It doesn't matter if it's there when video is paused or ended though).

  • If disappears here when the video is played. Of course it will be visible if the mouse is over the video. Nothing's changed.

  • q1kq1k
    edited June 2016 Firefox
    wOxxOm said:

    If disappears here when the video is played. Of course it will be visible if the mouse is over the video. Nothing's changed.

    I must mention, I don't have 'Play directly' checked...
    With that enabled, it does disappear, but the normal youtube controls are gone..
    I guess that one is the default browser html5 player...
  • edited June 2016 Chrome

    Just so you would know the script I linked above "Youtube new UI fix", removes the default title bar. So with this script adding it's own title bar is great :), but problem is that it doesn't disappear when not hovering (video playing btw.. It doesn't matter if it's there when video is paused or ended though).

    Well, my script primarily loads videos directly (without the youtube player), which is its main purpose along with fast loading of thumbnails. In this case the title behaves like I described above without any problems.

  • Ah, now I see what happens with that other userscript enabled.

    Try the new version: http://p.ip.fi/3-qG

  • q1kq1k
    edited June 2016 Firefox
    That takes care of that.

    Just one more thing though,
    Is it possible to show the length of the video as if the control bar was visible?


    and
    BTW, is there any way to force the embed video to use the HTML5/youtube player and not the flash player..?

    I often visit the playdota forums and they are forcing the flash player on me, which can be laggy as hell and page loading can be tedious. That is just one of the reasons why I wanted a script like this. I even suggested something like this somewhere, not sure where though.
    Here's one thread where you can have a look.
  • edited June 2016 Chrome

    show the length of the video

    Added to the title http://p.ip.fi/a6Ax

    force the embed video to use the HTML5/youtube player

    Presumably html5=1 url parameter should have done that but for some reason it doesn't work.

    Here's one thread where you can have a look

    Some of the videos fallback to flash (it works fast here FWIW), some play directly.

  • q1kq1k
    edited June 2016 Firefox

    Ok, good.

    Only problem with some websites still force the flash player though, but at least loading is much better there (namely playdota forums).

    Also with the 'new ui fix' script, the youtube player has the controls visible at all times, so it is necessary to add 35 pixels to the height. But that's a whole other issue, I will probably ask the maker of that script to take care of it. But I'm not sure if it would work, seeing as previously he tried to do that and didn't succeed.


    anyway, thanks for that, it's looking great.

  • q1kq1k
    edited June 2016 Firefox

    I noticed another thing.

    The IMG there can get messed up.
    Firstly I see you add negative value for top margin, thus moving the image up. Then the height can be all weird if the video is not 16:9, so I guess the height should be 100%?.
    I tried putting top-margin: 0; and height:100% and it does the trick.
    But I'm not entirely sure what would happen if the video was bigger in width (21:9), I guess it will just stretch it to fit the height, just as it squeezes it if it's smaller (4:3 etc..)

  • A negative top margin is required in cases the image height is larger than the container.
    As always provide an example url.

  • Well, I just deleted history... Sorry about that.
    I created this blog just to show this but I ended up with something else. The video preview is messed up, and when clicked on the video it starts twice, just like it does when going to the 'share' options on a youtube video and clicking "show more".

  • Yeah the layout is messed up because it's javascript generated. I'll add some checks to skip such cases.

  • q1kq1k
    edited June 2016 Firefox

    To continue from my last post...

    Just found a video on some forum, here's link

    The one I'm talking about, is post #6 there. (the solution i proposed height:100% works fine there, the problem is it can get stretched or squeezed)
    You can clearly see the image is cut top and bottom, essentially giving a false perception of the video.

    Also another thing I noticed was since that website is dynamic size, when going from large view (maximized browser window) to smaller window mode, the replacement image height does not get changed (it just simply stays bigger and looks ugly)

  • I'm not sure it's possible to detect such dynamic sites so maybe you'll have to exclude them in the script's settings. As for the picture, it has a 4:3 ratio, which usually happens only if YouTube pads a 16:9 thumbnail with black bars that I crop via negative margins. I'll see if I can analyze it using Canvas API.

  • q1kq1k
    edited June 2016 Firefox

    I'm not sure it's possible to detect such dynamic sites so maybe you'll have to exclude them in the script's settings. As for the picture, it has a 4:3 ratio, which usually happens only if YouTube pads a 16:9 thumbnail with black bars that I crop via negative margins. I'll see if I can analyze it using Canvas API.

    Yes, that image is actually 1280x960 (4:3), with your script the image width is adjusted to the width of the "player", thus cropping the top and bottom.
    I think the best way to put the image is going to be in the original ratio just centered using left margin.
    Actually you would probably need to calculate the image ratio and change the height/width according to the div container (whichever hits the borders first). Since the player will be 16:9, and if the image is 4:3 the height would touch the borders of the div first so here the height would be 100% and the width would be auto, and the left margin should be calculated and adjusted accordingly. On the other hand, if the video/image is extra wide (21:9 or the sorts) the width would be 100% and the height auto.

    In short, you would probably need to use the coefficient value (16:9 is 1.77777(7) ). So if the image is larger than that, the width should be 100% and top-margin calculated & added. And if it is smaller, the height would be 100% and left-margin calculated & added.

    And from what I could see, these calculations are already done and working in YouTube+ (feature: no autostart playing videos; I think the option is called 'autoplay', i'm not so sure, i want my videos starting automatically).


    As for the dynamic website, you would need to detect the change of the browser size and adjust the div's height and width accordingly. But that's a whole other issue. I don't really go out of maximized view, but when I do, it can be annoying.

    That is all.

  • Well, I do some calculations and on the sites I frequent those are working correctly. I'll look into the problem.

  • q1kq1k
    edited July 2016 Chrome
    Hey, do you think you can add the video length time inside a 'span' or a 'div'.? That way maybe I could be able to re-position it to the bottom left corner with stylish.
  • q1kq1k
    edited July 2016 Firefox

    And another thing,
    I also somehow managed to get the 35pixels that I need for the "youtube new ui fix".
    But I have one problem completely taking care of it by using only CSS.

    There has to be an extra class because CSS doesn't have styling of a parent element based of a child. Basically if the ".instant-youtube-container" contains "iframe", add some styles to the parent.

    So I'm asking you to add an additional class to the '.instant-youtube-container' when video has started playing (iframe visible).


    Thanks

  • edited July 2016 Chrome

    New test version: http://p.ip.fi/veFi

    I think I've fixed everything except that 4:3 video because it's the only 4:3 thumbnail without padding I've seen so far (youtube always pads 4:3 thumbnails to 16:9 aspect ratio automatically).

    When an iframe is created the container div receives iframe attribute so you can style it as .instant-youtube-container[iframe] { }

  • q1kq1k
    edited July 2016 Firefox

    1.
    Well,
    First we calculate the image ratio (divide height/width), if the value is bigger than 0.5625, we set the height to be 100% (relative to the div).
    Then we get the new width of the image, subtract it from the div, and divide that by 2. And we get the left margin we need to put.
    But in order to be more effective we should convert this to percentage (the calculated margin / the new width of the image * 100). Now we have the %. margin-top will be 0 in this case.

    Now there will be the wide images that will need a top margin. Basically if height/width is smaller than 0.5625, we set the width to be 100%.
    Then we get the new height of the image, subtract it from the div and divide by 2. And we get the top margin we need to put.
    Again, to be more effective we take the (calculated margin / the new width of the image) * 100. And add this value as %. margin-left will be 0 in this case.


    In code, it will look something like this:
    (this is how it would look like in java. I don't know how to write this in javascript, so bare with me.)
    https://paste.ee/p/25ofh

    In theory this should work fine.
    I just can't test it because I simply have close to nothing knowledge of javascript.




    2.
    I will just ask you to do 1 other small thing,
    Basically add another div on top of the current one.
    The structure will look like this
    .instant-youtube-container .instant-youtube-container-wrapper , and in this wrapper we put everything from img to buttons to video and iframe. It will have height and width 100% relative the the parent (.instant-youtube-container )

    The reason for this is because, again, with CSS I have very little control over what is going on.
    None of the styles will have to change, it's just another div that can help me or another person to style this with CSS and not have to edit the script and get lost in the code :sweat_smile:

  • edited July 2016 Chrome
    1. I can do such basic math myself if needed, but, as I said, I see no need for special-casing one irregular image out of thousands 4:3 youtube thumbnails that have black bars (i.e. real black pixels) on the top&bottom of an actual 16:9 screenshot.
    2. Sure but first I need to see an example css illustrating how the wrapper would simplify things.
  • q1kq1k
    edited July 2016 Chrome
    Well, lots of older videos are not 16:9 (not necessarily being 4:3, it could be 3:2 or 5:4), and many new videos are wider than that.
    That is why we need the proper margins.

    As for the extra div, that's to use calc(100% + 35px) for the size of the div (like I said previously, I'm using "YouTube new UI fix" which needs that extra 35px for the permanent control bar, and I can't use it on the first one because that will ruin it.




    Though, it might be possible to do it with margin bottom = 35px, but that will require selecting all other elements separately and add 100%+35px, but this will distort the image. So I'm not sure how this will play out...
  • edited July 2016 Chrome

    lots of older videos

    As I said the thumbnails are automatically padded by Youtube with black pixels in the image itself regardless of the video. I've checked about a hundred of different thumbnails explicitly by opening the image in a new tab or in devtools. I believe every video on the pages you've linked (and those I see on other sites) has a correctly sized thumbnail here, so I'm not sure why that single anomaly should bother me.

    that's to use calc(100% + 35px) for the size of the div

    Maybe a screenshot of what you want to achieve could help too. Otherwise I can imagine other ways of shifting things around with css that don't require an additional wrapper.

  • q1kq1k
    edited July 2016 Firefox

    As I said, since I'm using "youtube new UI fix" (which requires 35px for the control bar), to get the controls visible and not covering part of the video, we need 35px extra on the main div.
    I have tried doing it with an extra div, but for some reason the child one gets cut off. z-index, position:absolute or anything doesn't help. We would still need to increase the main div height, and as far as I know it can't be done with just CSS.

    But I managed to work around it. It's not very effective.
    Here's a screen.
    https://s31.postimg.org/svt1smj9l/image.jpg

    If the embedded video takes less space than the max height/width, than I get black bars to the sides when video is playing..

Sign In or Register to comment.