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


  • Ugh... okay, guess it won't hurt:

  • q1kq1k
    edited July 2016 Firefox

    Now it's not detecting some of the videos.

    An example is the first one on this page.
    There are two iframes for that example.
    Previously it was detecting it..

  • Please be specific. I see two black thumbnails for deleted videos with or without my script.

  • q1kq1k
    edited July 2016 Firefox

    It's the first video in the first post on the first page there.
    It has two iframes.

    Before this version, it was detecting it.

    There is another example here. This one doesn't have nested iframes though.

    Again, on your last version 1.5/1.5.1 it was detecting them

  • edited July 2016 Chrome

    It's the first video in the first post on the first page there.

    another example here

    Both use a custom player-embedding script instead of the normal youtube embedding code, that's why I'm skipping it as there are too many things that can break. If such things will get popular I'll see if it's possible to intercept them without problems.

  • Well, I compared the last 2 versions. And removed
    :not([src*="enablejsapi=1"]) and
    && node.src.indexOf('enablejsapi=1') < 0
    And it's still working fine, even on the blogspot I linked the other day.

  • Well, that's a hit-or-miss, and I don't want to risk.

  • well then, maybe cut that part of the link out?

  • Which will break the code that depends on the custom player's presence.

  • q1kq1k
    edited July 2016 Firefox

    Well then,
    How about adding an option to "capture all embeds" even if it has enablejsapi?
    With a warning label maybe?

  • Yeah, this could work.
    Not sure what the warning label might look like though.

  • The 'safe' option doesn't remember the state, it's always disabled (just the way I like it :wink: )

  • I've added thumbnail ratio adjustment based on the real video size:

  • thanks for that,

    btw, the 'safe' feature is not working. it always stays disabled...

  • edited July 2016 Chrome

    Thanks, updated it on greasyfork.

  • I've fixed a couple of issues with 4:3 embeds on
    Also, toggling [x] resize now keeps the clicked video's center at a relatively same window position.
    Test it:

  • q1kq1k
    edited July 2016 Firefox
    Also, toggling [x] resize now keeps the clicked video's center at a relatively same window position.
    Test it:

    I don't know how that is going to help me, because I already have a css style in stylish to make the max width smaller than it may be, basically 854px (480p).
    Besides, toggling that option changes all the videos, and some might get too small (i guess that's the size used when they were embedded?)

  • I've added custom size options, test it:

  • q1kq1k
    edited July 2016 Firefox

    Can you also make the height to change in ratio with the width?
    For example, I choose width=854px, and height 515px (480 + 35px for youtube new ui fix). (This will probably not be very accurate though, because when decreasing the size that extra 35px shouldn't change... (I'll still need to resort to using stylish for it... maybe adding custom fixed size padding to the bottom?, the first div would have padding-bottom=35px, and the second one height would be calc(100% + 35px). ) )

    Anyway, if there is not enough space to go with the full width(854), the player size gets slimmer (which is expected). But the problem is, the height doesn't get changed, it always stays 515px.

    Also, now I notice I cannot disable 'play directly' and 'safe'.

  • edited July 2016 Chrome

    Fixed the options:
    Didn't implement autoshrinking of height yet.
    As for the padding, I don't think it should be an option of my script.
    Also, now the script uses !important for everything because some sites break my layout completely. I'd like you to test if you're still able to apply your CSS tweaks.

  • q1kq1k
    edited July 2016 Firefox

    With that last version the video doesn't appear anymore.

    For the padding though, I tried it but as you probably know padding cuts from the height, so it has to be margin (as it adds to the height). But the problem is, if I increase the second div (100% + 35px) it gets cut off, no matter what I try (z-index, position, display, visibility, opacity, noting helps. I don't know why this happens, but it shoudn't..)

    So what I still need is, extra px in height. So in the custom size I would have to add width:854, height:480, +35px extra fixed size. so even if the height changed because of shrinking, that extra fixed value will always be added (by default it can be 0 I guess.).

  • q1kq1k
    edited July 2016 Firefox

    OK, I just noticed, you have added opacity: 0 on the iframe/video.
    So that's one problem out of the way..

  • I simply forgot to test the youtube player mode, here's a fix:

  • q1kq1k
    edited July 2016 Firefox

    It works ok, except the height thing.

    As for my styles, I'm not using much. Just this:
    @-moz-document regexp(".**") { .html5-video-container{ height: 100% !important; } .video-stream { height: calc(100% - 35px) !important; } .ytp-fullscreen .video-stream { height: 100% !important; } }
    I'm cutting 35px here because the main div is bigger by 35px (this is so the controls don't hide part of the video(youtube new ui fix)). But again, I would like to point out that there has to be a fixed height size increase, that wouldn't change with shrinking.

    Previously I was doing max-height:515, padding-bottom:35 on the main div.
    And height, width, of 100% on the iframe, and plus the styles above. But again, I had the problem with the height not adjusting properly when shrinking/smaller player.

    I see that using calc(), it is possible to add px twice there calc(somevalue-in-px + 35px)

  • OK, so I found what change is needed in the code to add my 35px on the 480p player size.
    On line 237, 238, case '1080p': case '720p': case '480p': case '360p': h = (parseInt(resizeMode) + 35); w = Math.round((h - 35) / 9 * 16 + 0.49);
    I'm adding 35 on the height, and - 35 on the next line so the width won't increase as well.

    But after this there is a small problem with the image. Basically if it is a widescreen image, it takes more width than the div, thus it gets cut a bit on the right side. So to take care of this I have added
    :root .instant-youtube-container img { height: calc(100% - 35px) !important; }
    I know this is not the best solution for this, but I just can't do anything about it from within the script.
    Basically that extra height that we add there should be ignored when making the rest of the calculations.

    That is just one reason why in my previous comments I asked for the extra fixed height to be added to the div no matter what the calculated height would be.

    Anyway, there is still the problem with the height not changing, when the page/and width of the player gets smaller.

  • Anyway, there is still the problem with the height not changing

    Yeah, I'm on it.

    As for the extra padding, I definitely see no reason to add an option for that, but there's a slim chance it's possible to detect the presence of that other userscript and adjust my calculations accordingly.

  • q1kq1k
    edited July 2016 Firefox

    Yeah, I guess it might not be possible to detect if that other script is running, that's why I asked for the extra custom fixed size, that will be added on top of the calculated height. I somehow managed to do it in the previous post, but it has its flaws.
    This is what I have in mind though.

    Also, if you think you can make it, would be nice that in the custom size we could have a "link ratio" button, basically changing one value (either height or width), the other one should auto adjust to correspond with the default ratio (16:9).

  • q1kq1k
    edited July 2016 Firefox

    Hey there woxxom. Me again.
    I have found a better way to add the image in the player box.
    Instead of an <img>, and then calculating the size and position, all you need to do is:

    • Add the picture as background to the other div, or change the img to a div, with 100% height and width.
      background-image: url("image url");

    • Next, make it not repeat
      background-repeat: no-repeat;

    • Then, we take care of the size
      background-size: contain; (this will contain the size to whatever the div is).

    • And finally, position it in the center, horizontally and vertically
      background-position: center center;

    • Or written in one line background: rgba(0, 0, 0, 0) url("image-url") no-repeat scroll center center / contain

    When the video is started, It would probably be best to hide the div (visibility: hidden, opacity: 0, display: none, w/e, it's your choice).. I'm not sure if it will be necessary though.

    Also I noticed the video itself doesn't change dimensions when increasing/decreasing the browser size (on dynamic websites).
    I think, you need to change the height/width of the iframe/video to be 100%, maybe add the !important as well?.

  • better way

    I disagree. Backgrounds should be used for design, not for semantic content.

    change the height/width of the iframe/video to be 100%

    Done, thanks.

  • q1kq1k
    edited July 2016 Firefox

    OK, but wouldn't it be simpler to use a background?
    I'm sorry, I'm just trying to learn.

    Also when I add some value in the custom size, it says "it's not allowed and I should put a value divisible by 10". Why?

Sign In or Register to comment.