Hugely improves load speed of pages with lots of embedded Youtube videos by instantly showing clickable and immediately accessible placeholders, then the thumbnails are loaded in background. Optionally a fast simple HTML5 direct playback (720p max) can be selected if available for the video.
< Spätná väzba na FYTE /Fast YouTube Embedded/ Player
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.
Hmmm, now I have to click play twice...
Also on this website, the embed does not get generated
Screenshots with and without my userscript, and a channel url, please.Also this script seems to mess around with youtube channel featured videos
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.
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
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.
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...
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
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.
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.
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.
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.
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.
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.
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.
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
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] { }
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:
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...
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.
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..
Ugh... okay, guess it won't hurt: http://p.ip.fi/APEL
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.
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
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.
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: http://p.ip.fi/16t3
thanks for that,
btw, the 'safe' feature is not working. it always stays disabled...
Thanks, updated it on greasyfork.
I've fixed a couple of issues with 4:3 embeds on http://www.playdota.com/forums/showthread.php?t=198958&page=168
Also, toggling [x] resize now keeps the clicked video's center at a relatively same window position.
Test it: http://p.ip.fi/UomA
Also, toggling[x] resizenow keeps the clicked video's center at a relatively same window position.
Test it: http://p.ip.fi/UomA
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: http://p.ip.fi/8IOi
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'.
Fixed the options: http://p.ip.fi/Bmh8
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.
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.).
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: http://p.ip.fi/PBZg
It works ok, except the height thing.
As for my styles, I'm not using much. Just this:
@-moz-document regexp(".*youtube.com/embed.*") {
.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.
EDIT:
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.
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.
https://s32.postimg.org/m9acda80l/optipng_ee82126639.png
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).
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:
100% height and width.
background-image: url("image url");background-repeat: no-repeat;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.
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?
Set step attribute to 1. I'll do the same in the next update.
With the last updates, once again, the checkboxes are non-functional.
Also for some reason there is a blank area (the size of the player) below the embedded video here
Fixed the checkboxes.
Dunno how to fix that site, its CSS is utterly retarded in regard to embedded youtube videos. WTF is adding an :after rule to position the element itself!?
Looks to me, they are doing padding %. But, it seems it's not needed at all. -Why add it? I have no idea.
I think I've fixed it, try the new version.
Nope, whatever the change was, it broke the whole script, it's not detecting any videos now.
Should be fixed now.
OK, for some reason, now the max-width is not added in some places. You can see for yourself here on this page. I tried it with custom player size, max-width was not present. Tried it with also with 480p, still the same. And with Original all the videos didn't have width, not just the first there.
On the blogspots it's the same, I guess because of the same reason.
When resizing the browser though, it adds the width. So no problem there. Just the initial one.
Should be fixed now.
Just one more small problem on the wikia page. When entering a bigger height value, the video might and will cover part of the text. Can this be solved somehow?
I don't think it can be solved. Currently the "fix" is that I'm blindly replicating the position attributes of the original element, and for this method to be universal I can't risk changing those values, because if such [retarded] method was originally used, then it's probably hardwired to the site/container layout.
OK then... I guess I'll be increasing their bottom margin through stylish..
Hmm, I just noticed, somehow it's actually doing the first div, here on this page (video # 1)
You see, there are 2 iframes and the script only changed the second, but now it's doing its work on the first iframe.. strange
It wasn't doing that before...
Yep, I'm catching div[data-src*="youtube.com/"] now too.
The problem is, when trying to play the video, it doesn't load, the iframe is actually empty...
Also enabling "safe", leaves all the embeds there untouched. While previously it was only the first one left alone, and the rest where replaced with the 'instant div'.
Updated.
That seems to have solved it.
I just have one more thing, more of an idea. Basically, if the video doesn't exist, to somehow better indicate it, not just the blank black space. Maybe make that video smaller? Write a message on it ("Video unavailable/doesn't exist")? Or even disable clicking to play it? Just a thought..
Try it: http://p.ip.fi/inV_
Now the background is transparent
Yes.
Well, if the img doesn't fit all of the div, there were black bars, now there is nothing.. It looks weird.
Maybe change the background color to grey-ish if the video is unavailable.? Not just transparent.?
I thought so too. Okay, updated the script on greasyfork keeping old black background + gray for missing videos.
Hmm, well simply making it transparent won't make it grey if the website is dark/black, the background will still be black.
Anyway, I think I can add my own custom style now.
Good point, I've switched to background: #888
#888 is a little too bright for my taste, I have added #575757 in my custom style now.
Thanks.
Yet another place where the script fails to do its magic. It's in the disqus comments. Here's a page where there is a video. This one is again with 2 iframes.
Test it: http://p.ip.fi/rZe3
With that it fails to play the video, just an empty iframe appears.
The same now also happens on the gamespot site, the first video.
Fixed: http://p.ip.fi/_tLY
Yeah, that seems to do the trick.
Just one other thing I noticed, the fullscreen option is not available in the disqus. Can that be enabled back?
Try it: http://p.ip.fi/tUux
will test now
it works fine with that, except none of the videos are properly embedded on the playdota forums. "play directly" works though..
Fixed: http://p.ip.fi/HvTl
For some reason all the elements are still visible over the video, ("play directly ..." and such) (.instant-youtube-link). Maybe hide everything when the video is started?
By the looks of things, a display:block !important; on that div overrules the inline style added when the video is started (display:none;)
Okay: http://p.ip.fi/9O0K
seems good now
Just noticed something strange on game-debate
The article width size is 853px, not by exact value though.. which makes this exactly 480p.
Then when the script replaces this iframe, the youtube-instant div is 852 and slightly smaller height too.
Because of that there is a black line on the side of the embed. Now in the custom size I could increase the height so there is no black line on the side, but there will be one top/bottom.
Can you check what is going on and why this max-width is not the full width of the article?
Here you go http://i.imgur.com/ND8Jkdc.jpg
I have selected custom with 853x515 for the youtube new ui fix but this happens even if I go to 480p. And even with youtube new ui fix disabled.
I don't have YT fix userscript, so no black lines here both for 480p and 853x515.
Well, as I said, even with that script disabled, it still happens. I still get the black line. http://i.imgur.com/ljgbzfE.jpg
In the layout tab in firebug it says: 852 x 479
Okay, but I can't reproduce it, so I can't fix it.
I can't even get the script to work on chrome (tampermonkey), not even on opera (violentmonkey). Wtf?
Found a bug, fixed, thanks.
Well I wanted to try the script and see if the black line will be there, but I can't do that.
Anyway, as for why the black bar appears, as far as I can tell it's because of the rounding, perhaps the width is being calculated or rounded to 852 by the script. Maybe just work with the float values? I'm sorry, but every time I open the script I'm getting lost in there.
On another note, it could be just calculated differently in firefox.. I just can't check in chrome.
Maybe on my laptop it will work, I'll have to check.
I've fixed the bug, so it should work on fresh installations. Values aren't rounded in the recent versions.
Nothing is changed I still get the black line...
I didn't change anything related to that black line as I don't see it.
Oh I see, you fixed the error caused on chrome.
Anyway, here's what I did to get rid of the black line:
change line 275 to:
h = parseFloat(resizeMode);
and line 292 to:
var parentWidth = Math.round(parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight));
This way it seems to work fine both on Firefox and Chrome. Haven't tested Opera, but it probably works..
Good catch, updated.
I have to ask, why add 0.49 here, (line 275): w = h / 9 * 16 + 0.49;
I don't think that is actually needed. Because if we have 720px height, going through this equation we get 1280.49, which in the browser would end up as 1281 and thus give us a black line...
I am using a custom size, but these other options would have a little problem.
It's a leftover from the old rounding formula, I'll remove it.
Another problem with another site.
My custom height size is not fully displayed. Basically the "options" are not visible, and when playing the video, the controls are cut off.
And second, here.
The hidden videos are displayed there on the top.
Test this http://p.ip.fi/zUED
Problem is fixed for the second link.
For the first though, now the player is completely visible, but if a higher value of height is inserted, a part of the article itself gets hidden. The same now happens over on the wikia pages as well.
Well, both sites use an absolutely retarded method of positioning videos, and currently I'm not sure there's a safe method of hacking into it.
I have an idea though,
What if you check to find A parent element that contains nothing but other empty elements and/or-just the iframe/embed.?
so in the case here, which has a div(vid-container) with 2 elements, (an empty paragraph and a div which has only the iframe).
The script before was replacing the second div. But now it's only the iframe. What my idea is, to find the empty parent element (excluding empty childs, like p and such), and to replace that one with the -instant-youtube-
That way we won't need position absolute.
Nah, I can't replace the container if it has a class name or id that may be used by the site's script to control that parent element. Otherwise The hidden videos are displayed there on the top problem occurs.
maybe i didn't express myself clearly enough. well what if we find the empty parent element (including empty childs), that doesn't have it's own height (or height: 0). and change that one?
In the second case, those divs are not visible by default, so here don't replace that div, but the child element? oh, and they also have a certain height set.
In the first case, this way it should get fixed.
That's too fragile.
What if we check if the parent element has padding-bottom/ top, of 56.25% (since this is what they use to create this "responsive design"), then get the computed height of the element, and increase it along with the -instant-youtube- ?
And how to discern reliably this type of positioning from something innocent and adjust it precisely?
What do you mean?
I think I found a reliable method. The script is updated.
Nope, still no effect, my custom sized player is still being cut.
Use Stylish addon. I can reliably alter simple cases only, like the wikia page.
Ah, forgot I have added a per-site config, so here it goes: http://p.ip.fi/G-pP
Ok, with that one it replaces most of the parent divs(video-container), but not all of them...
Nah. I saw it just once in FF, but not anymore. It's beta though, that's why, I guess. Anyway, if you can reproduce it reliably, I need more info like DOM tree screenshot in devtools etc.
No matter how many times I reload the page. There are 2 videos' parent elements are not replaced. https://s31.postimg.org/bmcrrxaw9/Untitled.jpg
The 2 videos are still not replaced, that's the second and last video there.
Also the padding issue is back on the wikia (the empty space below the video.).
I'm disappointed with FF. I've added a workaround for its bug with getComputedStyle, so now padding on wikia is fine. But I don't know how to fix its buggy behavior of such a basic DOM function as getElementsByTagName that works perfectly in Chrome... so I just don't want to waste my time any more. Maybe I'll invent something later.
Yay, found a way http://p.ip.fi/lavZ
Thanks, that works.
I will ask you again to put the extra option, "additional height", so as to add extra height on top of the calculated height.
Right now, on every update I have to edit the script and change line 351 to:
return {w:w, h:(h+35)}; (the 35px is for youtubenew ui fix)
Now that +35 part could be a user input value:
That's the price you have to pay for not moving along with the times :-)
That's the price you have to pay for not moving along with the times :-)
But I don't like the controls bar to auto hide :( At least if it isn't fullscreen that is...
Also, editing the script will disable future updates alerts.
Hey, there is a problem with some sites centering the videos.
Here, there are videos on the bottom, clicking one of them will open a modal window and the video should be centered,
but the script adds margin: 0 !important; as style to .instant-youtube-container, and as inline style. thus making it impossible for me to quickly fix it with stylish.
Now if there wasn't the inline style (or at least the inline style wasn't !important), it will be possible to change it with stylish.
I have to add inline !important styles in order to keep things from falling apart due to site's rules.
As for this site I don't understand how that iframe gets centered because there's no display:inline rule for the iframe, but it ends up with that rule anyway.
Even if I delete margin rule, nothing changes.
As for this site I don't understand how that iframe gets centered because there's no
display:inlinerule for the iframe, but it ends up with that rule anyway.
The default alignment on the iframe is through this:
.LightboxModal .media {
line-height: 100%;
text-align: center; /* this centers the elements, (the iframe has .media class btw) */
}
Even if I delete
marginrule, nothing changes.
The script add margin:0!important; on 2 places, inline and the normal class .instant-youtube-container
They have this thing though:
.LightboxModal .video-media embed,
.LightboxModal .video-media object,
.LightboxModal .video-media > div {
display: block;
margin: 0 auto;
}With it if there were no !important margins, this will make them centered anyway.
So only removing the inline !important margin, would make this fixable with stylish.
I meant the iframe shouldn't have been centered even without my script interfering... Well, apparently, there's no need to adopt the original margin anyway. Test this: http://p.ip.fi/HRCk
And here's an automatic height adjustment companion script for you: http://p.ip.fi/d3EK - I've tested it for size=480p in the main script's options.
I meant the iframe shouldn't have been centered even without my script interefing...
Well, apparently, there's no need to adopt the original margin anyway.
Test this: http://p.ip.fi/HRCk
Thanks, now I can take care of it with stylish.
Also when choosing 480p, the max-width should be 853 not 853.333, because if it's .333 there is a black line on the right side of the video, at least there is on FF. I know the formula gives it that width, but perhaps the value that is returned should be integer?
Mathematical rounding of 853.333 should produce 853, so blame Firefox.
Yeah, but if we add math.round in line 351:
return {w:Math.round(w), h:h};
problem is solved.
Okay.
And yet another issue with wikia. Videos like these are not visible when playing.
I've added min-width: <ORIGINALWIDTH> for all videos and a special rule for this wikia: http://p.ip.fi/X1Xf
There are more issues with eatparent: 2. I tried setting it to 1 and there seems to be no problems so far.
What more issues?
The second parent has other elements, like captions and such, and the modal window box is just empty because it consumes that parent.
And if we go over to just the video page, there is no info on it, like about, metadata, description, related.
But if we set eatparent to 1 there is no problems, none that I can see at least.
Also the min-width, causes problems, since the height is not changed of the main div, we end up with a flat video.
so this property is not needed.
Okay, http://p.ip.fi/wj_W, now eatparent for this site is a CSS-selector figure, so it doesn't cause problems on the video page and fixes the "flat video" problem.
But we still can't eat the figure itself, that figure always has other child elements along with the video, and the div containing the iframe, so it's: figure -> figcaption(for captions and such), div(iframe).
Also the iframe is always contained within a div specially designed for the video. So if we set eatparent to 1, and we fix this problem not only in lanoire.wikia, but any other wikia for that matter. (fandom.wikia, reddead.wikia, etc..)
But then the min-width could cause problems again. So it's best to just remove it.
eatfigure: '.inline-video' should be fine then. http://p.ip.fi/5LC-
Yes, it seems fine
{host: /(^|\.)wikia\.com$/, tag:'iframe', match: '[src*="youtube.com/embed"]', eatparent: '.inline-video'},
This will affect all wikias, not just lanoire.wikia.
But min-width has to be removed.
But min-width has to be removed.
Why? I've added min-height and I don't see any problems.
I think you should update the min- width & height as well on resize: exibit 1
But then the 'companion script' you made will also need to adjust those as well.
I don't see any problems with the exhibit 1 neither before nor after resizing. Please elaborate.
Well, min-height and min-width, stay the same, as for height and width can actually go below that value. https://s31.postimg.org/sj0ilq5u1/image.png And then eveything look ridiculous
Here's another screen https://s31.postimg.org/91oqvgt89/123.jpg
You've convinced me, now min-* are updated after resizing too http://p.ip.fi/dCZ9
Hmm, it's interesting how the problem with the video not appearing in the wikias, solved it self. I mean, I removed the site specific eatparent rule, and the video still appeared properly. huh?
It means that the general logic is good enough.
One other thing, is it possible to make the controls visible always? To ignore controls=0?
Why? I thought you use another script that always shows the controls.
If there is controls=0 the iframe will then have no controls. In direct mode though, the controls are there, but I don't use direct mode.
Ah! My script only adds controls=1 but it should rewrite the iframe url.
Try this http://p.ip.fi/aDmi
It works.
And what are your thoughts on https://www.youtube-nocookie.com/embed/ ? That one should increase privacy, but I couldn't find much information...
No thoughts until I see it used somewhere.
http://www.cnet.com/news/youtubes-new-nocookie-feature-continues-to-serve-cookies/
TL;DR
That article is 7 years old though... But anyway, I guess this nocookie youtube is not used a lot, so it's not really necessary to support it.
We have a problem with GOG
The video there is out of place. I tried putting position: initial and I got the video where it is supposed to be. But there is still black area below it, so removing the height & min-height solved the problem.
-- Another way to solve it is to put position:absolute, and top:0, I believe. But the width is the problem in this case.
Another is the image, this could also be a problem with any image of this ratio, basically the image there in this case is wider than 16:9, so I guess if the image is 16:9 or wider it should get width:100% and height:auto, not the other way around. It sometimes happens when the page loads, but always happens on resize.
And the video title link, is also misplaced a bit, this is caused because its width is 100% and also has padding which adds to the total width. It can be easily taken care of by adding box-sizing: border-box;. But doesn't seem to work if the main div is absolutely positioned.
You could always do width: calc(100% - 20px) or something like that.
And the no controls problem is still not solved in the new version (2.4.5)
Argh.
They use a retarded method of positioning via :before and an empty element. I'll see if I can make a universal workaround, otherwise I'll just remove "[x] safe" option completely and will skip such videos by default, because it's impossible to handle all possible crazy css hacks used by people.
basically the image there in this case is wider than 16:9,
And the video title link, is also misplaced a bit, this is caused because its width is 100%
I don't see any problems. ALWAYS POST A SCREENSHOT!111
Whatever, I've fixed the problems I see, the script is updated. And now the storyboard is actually a full-fledged "seekbar preview" like the one on Youtube. IMO it's awesome!
Great.
About the video link, it is misplaced because there is 100% width, and padding too which increases the width.
So either remove the width or add box-sizing: border-box;, to take care of this.
As for the picture, the width and height values get swapped when resizing.
Here: (it shows the picture as it is when the page is first loaded, and the problem with the link title)
https://s31.postimg.org/ek9x82em3/image.jpg
Pic#2: (values of the width and height are swapped, and image is out of place.) https://s31.postimg.org/pl52d36ux/image.jpg
So either remove the width
Agreed, done.
width and height values get swapped when resizing
Can't reproduce. What "resizing"? The video container on that site has fixed dimensions based on the enclosing .container that is 1060px wide.
It doesn't happen always, but it does happen quite often. https://vid.me/5X9W
I guess somewhere in the code the values are being changed
Ah, previously I didn't shrink the window that much. I can reproduce it in FF 48, but not in Chrome. FF is running the resize handler several times slower than Chrome, which confuses my script, I guess :-)
But is it really necessary to resize the image though? Wouldn't it be fine with the initial calculation, and keep the width/height even when resizing.? I mean, there aren't exact values. So it should be fine.
It's needed when the video container switches orientation from horizontal to vertical in relation to the actual image content - many of 16:9 videos have 4:3 cover-image and vice versa.
Anyway, I think I've fixed the resize timer problem - http://p.ip.fi/jqct
Well it is slower now. But at least the image doesn't get misplaced.
I did propose to use a div with background-size:contain, background-position:center center, background-repeat:no-repeat. That would make this a lot faster and simpler.
Inside the div can be all the rest of the elements(play icon, play directly, options..), and hide this div once the video is loading/started (no need to hide every element separately).
The only things outside of this div are going to be the title link and the loading image which should also be assigned no-repeat to it.
Or just, you know, only replace the img with a div...
I think it's the 10th time I tell you that youtube serves many 4:3 thumbnails for 16:9 videos with black bars above and below, 16:9 thumbnails for 4:3 videos with black bars to the left and right. Calculations will be needed anyway to stretch the background. And I don't see any speed difference in FF - it's as slow as always, compared to Chrome's. Not that it matters, this is an edge case as people don't stretch the browser window in small increments continuously, they just maximize/restore or resize in one quick motion.
Alright, I won't bring it up again.
Anyway, why every time you add/change the options, they stop working... I can't remove the red corners.
But, I would keep them on, if they were a little more subtle, and only appear when mouse is near the corner (that is, if the corner is 10px, when mouse is say 20px away from it, it should appear)
EDIT: just noticed the update of the script, so just ignore that first point
You only notice them because you're looking at them instead of the video itself. Anyway, if you're willing to suggest a better style I'll use it.
Well, right off the bat I can think of 1 way the corners to appear when close to the edge.
Just to be clear: I don't want to restyle them myself :-) I already changed them from an originally inconspicuous styling to the current one. As for the hotkey, what if 4 videos are pinned to different corners? What if that hotkey will conflict with the a hotkey defined by the site (most sites with videos don't use them, but what if)? BTW you can simply click the original placeholder to return the video back.
To be clear: I don't want to restyle them myself :-) As for the hotkey, what if 4 videos are pinned to different corners?
Yeah, I just thought to try that. And it's awesome, just problem is that we can pin multiple videos to one corner. Disabling the corresponding pin button if there is already a video pinned there should do the trick. For unpinned videos that is..
For the styles, each of those corners should have another div wrapping them.
Here's how it would look.
https://jsfiddle.net/xrrn95yf/2/
I have added background color to that pin-wrapper div so it's easier to see how the hover will work.
Disabling the corresponding pin button if there is already a video pinned there should do the trick
I thought about that but then decided against it. What if someone decided to open a second video in the same place, watch it, remove it, continue with the first one?
For the styles, each of those corners should have another div wrapping them.
I think this is VERY misleading: so I move the mouse cursor close to the edge, a triangle appears - oh so now it indicates what happens if I click, right? Wrong! I have to move the cursor farther. How do I guess that? That's a military-grade a-bomb activation sequence.
I should have said explicitly that I agreed to a less obtrusive visual styling while keeping the current hover behavior. Initially my own styling was almost invisible because it had a semitransparent white flat fill. I think a 'better' styling would have to have more detail, maybe, or volume/texture.
Disabling the corresponding pin button if there is already a video pinned there should do the trick
I thought about that but then decided against it. What if someone decided to open a second video in the same place, watch it, remove it, continue with the first one?
But there will be multiple videos then.. What about replacing the video currently there.?
For the styles, each of those corners should have another div wrapping them.
I think this is VERY misleading: so I move the mouse cursor close to the edge, a triangle appears - oh so now it indicates what happens if I click, right? Wrong! I have to move the cursor farther. How do I guess that? That's a military-grade a-bomb activation sequence.
I should have said explicitly that I agreed to a less obtrusive visual styling while keeping the current hover behavior. Initially my own styling was almost invisible because it had a semitransparent white flat fill. I think a 'better' styling would have to have more detail, maybe, or volume/texture.
If we increase the pin-wrappers size?
And what if the opacity of the corner is by default 0.8 or so ?
But there will be multiple videos then..
So what? Let them be, not a problem.
If we increase the pin-wrappers size?
Then you will see the pins more often, and - what's worse - they'll flicker a lot more when you move the cursor over the video and near control buttons. I guess I'll just add transition: opacity 3s.
Hmm, I think that could work.
How about a different speed when removing it?
transition: opacity 2.5s ease-in, opacity 0.4s ease-out;
And immediate appearing on hover
[pin]:hover {
opacity: 1 !important;
transition: opacity 0s;
}
Okay, sounds reasonable.
This seems interesting.
http://jsfiddle.net/chriscoyier/t5Kts/
It could be made so if the mouse is say 100px away opacity would be 0, then the closer the mouse is, the more the opacity is increased.
The final word is yours.
Eeeek, that's hell of a lot of js to execute for every mouse motion, probably as much as my resize handler has.
Simpler solution: I've added a transparent pins mode in the options.
Test version: http://p.ip.fi/0aTs I've added drag-n-drop of the container to start playing in a pinned position (only if "pinning" option is enabled, of course). Additionally, in Chrome drag'n'drop works during playback of directly played videos, not in FF yet.
Is the plan to make this drag-able, so as not to have to carefully click the corners? There could be a problem with the video pausing though.
Youtube+ has a similar feature to this and the same problem was present there. But in combination with YT new UI fix, that floater player dragging doesn't work correctly.
The idea is to simply flick the container toward a corner and it automatically starts playing there while I can scroll and read other posts/comments.
I haven't been able to reproduce a problem with the video pausing, though.
The idea is to simply flick the container toward a corner and it automatically starts playing there while I can scroll and read other posts/comments.
I'd like that
I haven't been able to reproduce a problem with the video pausing, though.
It was a former issue with youtube+. I'm sure you will get it working great right from the start.
http://p.ip.fi/X-_j Now when a corner is occupied the new videos are stacked above/below. No sanity checks are performed currently, so it's possible to overflow the "shelf".
Whatever the change was, it broke videos like these.
Thanks, fixed, updated.
Hey woxxom, In the recent updates I haven't been able to pin a video to a corner with a single click, I have to click twice to pin it. Unpinning requires one click though.
And why isn't it possible to drag the video while playing? I thought you added that feature, or am I wrong..?
Click bug fixed, please test: http://p.ip.fi/7TmU
As for dragging, it works for native html5 player in Chrome. Every other combination would require me to put a transparent div over the video. I'm not sure it's a good idea, moreover I would have to avoid covering toolbar (what size is it? it's unpredictable) and any of the editable elements that might pop up inside the iframe like sharing (displays a text input control where dragging means text selection) or any other stuff I don't even know about.
On the other hand I might add dragging over the full extent of video player with a modifier key pressed, most probably Ctrl, and add an option for that...
Yes, the click bug is gone.
Hey, I just noticed that it doesn't process the videos anymore where the iframe appears later (after a click), like on 9gag for example.
Gimme a link dammit.
Never mind, it got sorted by itself. It's weird...
Problems with armorgames,
The script processes the ad running before starting a game, which makes the game unable to start. I'm using an adblocker and it still gets processed.
Just simply removing armorgames from being processed isn't the best option. Because there are pages with walkthroughs of games which have YouTube videos. Plus there is the disqus comments below the game.
fixed
I have noticed another problem. This time with the notifications (the bell button) on youtube (google). When a notification is received (comment reply and such) the video is in a small thumbnail, but clicking to play gives an error.
Try the updated script. I've excluded some of google's internal urls used in that notification frame.
Thanks, it's good now.
A problem with playlists. I've seen a few of these on some sites.
It says video doesn't exist, and also there is no image, nor title, nor how many videos in the playlist. (clicking it though, starts normally.)
If you could make a quick preview of the videos in the playlist, it would be lovely (like the name, length and maybe even a link to watch it straight on youtube starting from that video).
Parsing the playlist embeds is a complex task so I've just added a check to skip such frames (the original is shown).
Problems on theverge, videos don't appear.
I've fixed it by adding a custom rule. Another site with retarded CSS positioning.
With the change you made in 2.7.4 to exclude the google notification frame videos, made them playable again. But it prevented me from easily increasing the height of that player.
Anyway, I've seen videos on Steam that don't work too.
And the problem is when building the iframe src, the ? is added at the wrong place.
Example page.
src="https://www.youtube.com/embed/cK97XUfdq1w&origin=https%3A%2F%2Fsteamcommunity.com&widgetid=1?html5=1&autoplay=1&autohide=2&border=0&controls=1&fs=1&showinfo=1&ssl=1&theme=dark&enablejsapi=1&FYTEfullscreen=0"
If you can fix this without excluding any domains, it should be fixed in the notification box as well, so you can remove that exclusion. :smile:
The google notifications are still available when visiting google.com domain (aboutme page if you have multiple channels on one account)
Also, on the corner player you add !important to each property, this prevents me from changing the size with stylish to make it bigger.
The only ones that I need to change are the width and height...
when building the iframe src, the ? is added at the wrong place.
Fixed, test it: http://p.ip.fi/lUhR
it should be fixed in the notification box as well, so you can remove that exclusion.
Which one of the five added?
you add !important to each property, this prevents me from changing the size with stylish
But in Stylish for Firefox you can use /* AGENT_SHEET */ to override !important, right?
when building the iframe src, the ? is added at the wrong place.
Fixed, test it: http://p.ip.fi/lUhR
Works good
it should be fixed in the notification box as well, so you can remove that exclusion.
Which one of the five added?
– I'm not sure, I'd say it's plus.google, – accounts.google doesn't exist, it redirects to myaccount.google, that one uses the same notifications from plus.google embedded in an iframe.
– And what is that youtube one? does it mean to exclude it from trying to run on the youtube.com domain? But why check for embed too?
– clients.google doesn't exist. I think google uses that one to send data securely in the background for syncing and such.
you add !important to each property, this prevents me from changing the size with stylish
But in Stylish for Firefox you can use
/* AGENT_SHEET */to override !important, right?
Unfortunately no. I've been trying to do that all day, for some reason it doesn't work.
So what I had done was edit the code and change it to this:
div.style.cssText = (
'position: fixed !important;' +
'contain: inherit !important;' +
'width: 400px;' +
'z-index: 999999999 !important;' +
'height:' + (400 / div.FYTE.cache.videoWidth * div.FYTE.cache.videoHeight) + 'px;' +
'top:' + (corner.indexOf('top') >= 0 ? '0' : 'auto') + ' !important;' +
'bottom:' + (corner.indexOf('bottom') >= 0 ? '0' : 'auto') + ' !important;' +
'left:' + (corner.indexOf('left') >= 0 ? '0' : 'auto') + ' !important;' +
'right:' + (corner.indexOf('right') >= 0 ? '0' : 'auto') + ' !important;'
);
I'm not sure, I'd say it's plus.google
I'll wait until you have some video in the notifications to test what happens when this exclude is removed.
What size do you set in Stylish for the pinned player?
I'm not sure, I'd say it's plus.googleI'll wait until you have some video in the notifications to test what happens when this exclude is removed. What size do you set in Stylish for the pinned player?
Without the exclude it's fine, fyte handles it nicely.
Depends on the website, for example on 9gag I have it on width 764px; height: 465px.
Oh and btw, you should probably do something about endlessvideo.com, infinitelooper.com, youtubeonrepeat.com
What should I do about it? Be specific please :-)
Since they are about looping videos or part of a video, maybe ignore those websites?
By default such custom embeds are skipped due to "Safe" option. If you like to live dangerously (tm) then you can add the excludes in greasemonkey, right? I've checked the urls, the only common thing is enablejsapi=1 which is already handled by the "Safe" option. I'm not even sure I should have added the unsafe mode...
Anyway, here's the new version without plus.google exclude and resizable pinned player (saved per-site/globally) via dragging the vertical border: http://p.ip.fi/iKYn
The gripper doesn't work on firefox. chrome can't reset to original size. If site-only mode is on, the reseting should be done only for that site (if it worked of course).
enablejsapi is added by many websites that don't even need it, that's why I've disabled the safe option.
Anyway, this one somehow is able to bypass fyte listenonrepeat.com, which is fine. But the other 3 that I linked, don't.
If you think you shouldn't exclude those, then that's fine by me. I'll have to add them in the greasemonkey settings.
The gripper doesn't work on firefox.
Which version? Works4me in FF51
chrome can't reset to original size. If site-only mode is on, the reseting should be done only for that site (if it worked of course).
Works4me. "Reset" uses the global size, not the "original". Maybe you can suggest a better wording?
If you think you shouldn't exclude those
My concern is that there are probably hundreds of such sites appearing and disappearing unpredictably, but personally I never used any, never saw one mentioned.
FF version is 50, 64bit.
When clicking the gripper, it just automatically adds "site-only" and I'm unable to move it.
I mean "reset" doesn't reset to the original/global pinned player size (this should probably be done only on that certain site. But I can't really test this, since it doesn't reset)
What I do is, move the gripper a little. #1 Then I select site-only mode, and move it a bit more. #2 Then when pressing 'reset' (R), it doesn't go back to the first size (#1), it doesn't change it at all.
btw, it's Chrome 54.
Also, why did the borders become so big. It covers almost half the play and fullscreen buttons.
I'll try to reproduce later in a portable older FF.
As for reset, its goal is to reset the size after it was saved, not during resizing. It's rather forget saved site data so I'll show it only when applicable.
why did the borders become so big
Screenshot, please.
http://i.imgur.com/MiyCBDx.png
I saw in the script that there is an extra lines added that make the borders twice the size when they are transparent..
Ah, the corner pins. It didn't cover the buttons when I tested here. Welp, I'll revert this change.
So I've restored the pin size and reworked the sizing tooltip. http://p.ip.fi/2bN3 Couldn't reproduce the problem with moving the gripper in FF40 as well as FF51 though...
I'm not sure what happened, but somehow it works on Firefox now.
As for resetting, I thought it should return to the global size set (so no need for reloading the page).
And when hitting escape to go back, it doesn't change the height back (just the width).
As for resetting, I thought it should return to the global size set (so no need for reloading the page).
Not sure I follow. Currently, site-only mode saves the size permanently in local storage of the site until the data is cleared by the browser, or user (via clear data option in browser UI), or when you press R during resizing.
And when hitting escape to go back, it doesn't change the height back (just the width).
Must be because you're using some custom CSS in Stylish. My code changes the height absolutely the same way it changes the width.
I'm not sure what happened but when I added the 35px needed for Youtube UI fix, pressing esc didn't reset the height, which is very odd. The only thing I added was +35 to a few places.
Anyway, I can do that with stylish, but, the only thing that will need to be changed in the script is the 'important' tag to be removed from the height, min-height, min-width, max-width, of .instant-youtube-container and the pinned one as well.
Either add those properties with css selector rather than them being written inline.
Or, another option is, to add an extra field in the "options", which is adding extra height on top of the height calculated for the 16:9 ratio.
If you think you can't/shouldn't do that, then I will have to edit the code, which is not an easy task for a newbie like me.
As for the "reset to global size", I meant it should change to the global size immediately.
So let's say we have this scenario.
The problem with it (not reverting back to global immediately) is that if I click the gripper (and not move it), a new global size is set.
I was thinking you could add global size to be set only if a button is pressed (like "G"). So rather then the current "click gripper to change global size", it should set it with a button.
This way, only moving the gripper will resize the pinned player for that page only (until we close that tab).
Additionally you could swap them, it can be, simply moving the gripper a site-only rule will be set.
But I'd prefer to set a global size by pressing a button. Heck, there can be a few global sizes that we can cycle through which can be remembered by site-rules. (But let's not go there)
If you think you can't/shouldn't do that
I definitely do think so, but I'll try to find some way other than !important.
let's say we have this scenario.
In the steps you described the site data isn't yet saved until you release the gripper (and it flashes in alternative color) so resetting is not available and the reset hint text is not displayed. To reset it you need to save it first by releasing the gripper. Or you can cancel immediately by pressing Esc. Or you can toggle Site-only back by pressing S again.
The problem with it (not reverting back to global immediately) is that if I click the gripper (and not move it), a new global size is set.
No, once site-only mode is activated, any subsequent changes are saved per site, which is indicated by the bright and bold text of the siteonly hint text.
you could swap them, it can be, simply moving the gripper a site-only rule will be set.
Maybe. I'm not releasing yet so I'll think about it.
When you hit reset, it doesn't go back to the global size, it stays at the size it was set before (the site-only rule) until reloading the page. I'd make a video but I can't at this moment.
If it's necessary to click a button to set a global size, any further and/or accidental clicks will not set a new global size.
I'd much rather just move the gripper and not worry whether I've activated site-only mode, so that I don't change my global size.
So there can be 3 options: S - toggle site mode G - set as global size esc- cancel
if site-only size is defined then additional option "R - reset to global" can be added. But, again, the resetting should go back straight to the global (so no need to reload). And maybe there can also be an option "forget/clear all site specific data".?
Can i ask for one feature request?
Twitter not support this extension (or this extension not access twitter). It dont allow fullscreen. Could you make it work for fullscreen?
@adeep, open a separate discussion topic please, this one is abused solely by q1k :-) Don't forget to add some urls for the tests. P.S. I've changed the title of this topic in order not to attract too much attention.
"abused..." hahahaha :: :grin:
Anyway, I checked twitter and once you start the video, scroll up or down so the video stops, then scroll back and it shows the fyte container... strange..
I see 8 page and think its the best way to get attention :)
Thanks @q1k, thats work for me too. i can live with that :)
And of course thank you @wOxxOm for this script
I receive emails for every message or topic on my scripts so it's okay to post a new topic. Anyway as I don't use twitter I need links for tests.
Name of the video should appear on the top
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.