Instagram videos not working in Firefox 52 ESR?

[caliber]

On 3/19/2019 at 10:47 PM, Mathwiz said:

Personally, I don't think it's worth the trouble. Much easier to just switch to one of the browsers known to work.

that's why I have uninstalled all chrome based browsers forever.

it's not only an instagram related issue there are plenty of other sites no longer supported by FF52

btw I don't know what does the Sampei message has to do with mine...

 

[mixit]

You guys give up too easily, is this the infamous XP lair of fanatics or not!?

Fortunately there is (for time being, anyway) a pretty simple fix for this "video problem". (I use quotes because it has nothing to do with video as such.) You don't need to switch or recompile browsers either - at least not right now over this particular issue.

Apparently ESR 52.9 handles CSS flex layout a bit differently, so with the current Instagram code the video and its surroundding elements kindly get the height of 0 pixels... This can be fixed by modifying a surrounding <div> container to use block display instead of flex.

If you use uBlock Origin, you can add the following rule to your My filters:

instagram.com##div.ZyFrc[role=dialog]:style(display: block !important)

(Just make sure Filterlists > Parse and enforce cosmetic filters is checked and that Settings > Default behavior > Disable cosmetic filtering is not checked or is overridden per-site for instagram.com.)

The same can presumably be done with other styling/tweaking extensions, only the syntax may be a little different. I don't use anything else, so can't give you the specifics.

If you don't use any such extensions and don't want to install them, you can just add the following CSS snippet to your userContent.css file (it's located in the chrome subdirectory under your Firefox profile folder. Edit: as @Dave-H pointed out, the file may not exist yet, in which case just create a new text file, put this stuff in it, and rename the file to userContent.css.)

@-moz-document domain(instagram.com) {
   div.ZyFrc[role="dialog"] { display: block !important; }
}

(In this case you'll have to restart the browser for this to take effect, only refreshing the page won't make a difference.)

BTW, aside from div.ZyFrc[role="dialog"] , simply using div.ZyFrc or div[role="dialog"] also works. I'm just using the more specific condition to hopefully avoid accidentally breaking something else on Instagram (I'm not a frequent visitor there, so I wouldn't know). The mangled class name ZyFrc is pretty likely to change when they rebuild they code, and using the role-based version without a class name may survive that. Or it may not - as we know web devs need to constantly tweak their stuff, even when it's not broken... So this may need to be revisited.

Edit: Forgot to give kudos to @Mathwiz for narrowing down the problem and linking to this change list with hints to flex layout being the problem.

On 3/14/2019 at 9:05 PM, Mathwiz said:

Edit: I've narrowed it down; NM 28 from July 14 shows the same problem as FF ESR 52; NM 28 from July 21 onward works. (Both 7/14 and 7/21 were beta versions of NM 28.) Here's a link to the 7/21 version in @roytam1's blog: one of those changes must have fixed it. https://rtfreesoft.blogspot.com/2018/07/weekly-browser-binaries-20180721.html

Edit 2: I tested this style fix on ESR 52.9.0, but I'd be surprised if 52.9.1 would be any different in this regard.

-----------------------

In other news, if you're spoofing a more current version of Firefox on all sites with ESR 52.9, apparently you'll have to drop your spoofed version below 57 on instagram starting today, because they seem to have switched over to Quantum-specific code for newer versions and basically nothing works anymore. (If you're using the default 52.9 user agent, you shouldn't need to make any changes because of this - at least it seems to work for me.) It could mean, though, that they'll be dropping support for anything pre-Quantum sooner rather than later, which may also affect the various Pale Moon derivatives, depending on how up-to-date their CSS and JS support is.

 

Edited March 21, 2019 by mixit

[Dave-H]

@mixit
You sir, are a genius!

The addition of the css file (my chrome folder was empty) has fixed it perfectly!
I love this forum so much!

Edited March 21, 2019 by Dave-H
Addition

[Mathwiz]

A tour de force, @mixit! I never would have thought uBO could fix this issue.

Actually, in my case, it couldn't because when I click on "my filters" an empty filter list comes up - but for some reason I can't type anything on the page! (I'm using the latest legacy uBO version, 1.16.4.10. Unsigned, of course.)

So I instead went with the userContent.css solution, and it works perfectly! I'll give it a try on SeaMonkey too.

Edit: This works on SeaMonkey too. (Just don't forget to restart the browser when using the userContent.css fix!)

BTW, thanks for the heads-up about spoofing "too new" of a browser version. New Serpent versions default to 60.9, and sure enough, Instagram quit working today. I backed off to version 56.0 and it's OK again....

... except that breaks GitHub so it's a SSUAO for GitHub back to 60.9 again.

Edited March 21, 2019 by Mathwiz

[mixit]

2 hours ago, Dave-H said:

@mixit
You sir, are a genius!

 

I am indeed a genius, because I already had this solution two days ago, but thought there was something missing from it, because I could only get it to work when loading a video page URL directly, and not when clicking on a video on a user's list. You know, when it pops up with apparently the same URL, but it looks like the video is put into an overlay over the list page with an X in the corner. So I spent quite some time trying to debug this, and in the end it turned out that for some weird reason Instagram was using different URLs to fetch my test videos in these two cases. The direct-to-video URLs were getting theirs from fbcdn.net, but the "overlaid" versions were loading them from cdninstagram.com,  which for some reason wasn't on my uMatrix whitelist for instagram.com and uMatrix was on. So, yeah, a real genius here.  Turn off them content blockers when investigating browser issues, kids!

59 minutes ago, Mathwiz said:

Actually, in my case, it couldn't because when I click on "my filters" an empty filter list comes up - but for some reason I can't type anything on the page! (I'm using the latest legacy uBO version, 1.16.4.10. Unsigned, of course.)

Why, that sounds almost like the MSFN forum post editor has taken over your uBO installation! The very same version works fine for me. If it's just a matter of typing not working, you could put the line into a text file and "Import and append" it from there.

Edited March 21, 2019 by mixit

[Mathwiz]

From your description, I'm guessing the relevant fixes (that let PM/NM/Basilisk/Serpent work) are:

Quote

- Bug 958714 Remove special case for flex & grid items' percent block-axis margin/padding resolution, to align with other browsers (b12973bc9)
- Bug 958714 Simplify percent-margin/padding resolution code to pass around a single length as the percent basis (83459c927)
- Bug 958714 Remove obsolete assertion & comment (1b153b3f2)
- Merge pull request #650 from janekptacijarabaci/css_layout_flex-grid_1 (edc1da82d)

There's probably an equivalent fix somewhere in the Mozilla repo.

(That is, if someone really were intent on trying to patch FF 52.9.0/1 to take care of this little issue)

[Velbone]

Thanks @mixit having to use a different browser to view Instagram videos was very irritating. So irritating that when I came across this thread and it mostly solved my problem I felt compelled to sign up to convey my thanks personally.

I'm a regular on a forum where many interesting Instagram videos are embedded and up until recently all was fine. Then one day the embedded videos weren't playing and neither were the same vids on Instagram.

They still won't play within the forum, unlike previously, but at least I can click on the video and it opens the original Instagram location in a new tab where they play fine.

[DrWho3000]

On 3/13/2019 at 1:43 AM, FranceBB said:

I can reproduce the issue.

Instagram:

- doesn't even load on Chromium 54

- it loads on Firefox 52.9.1 ESR but it doesn't play videos

- it loads and plays videos on Palemoon.

 

Please note that I don't use Instagram and I clicked on random things to test it. (I ended up on the profile of a speaker that works for CapitalFM, then on Taylor Swift and finally on a video made by some weird kinky youngsters about Shawn Mendes, which I didn't really care about).

 

 

 

I'm getting same issue on this pc with FF 52.9.0, yet it loads ok on the other pc ok same settings
I had this with youtube and after doing a ff reset and load all back in again it worked fine on youtube

I did try clearing cookies, that was a no go

Edited April 24, 2019 by DrWho3000
edit

[Mathwiz]

If you did a Firefox reset, you'll probably have to recreate your userContent.css file again (or copy it from the other PC). As I understand it, a Firefox reset wipes out all customizations in your profile.

[DrWho3000]

how do I do that please

sure I never did that before

28 minutes ago, Mathwiz said:

If you did a Firefox reset, you'll probably have to recreate your userContent.css file again (or copy it from the other PC). As I understand it, a Firefox reset wipes out all customizations in your profile.

 

Edited April 24, 2019 by DrWho3000
edit

[Mathwiz]

2 hours ago, Mathwiz said:

If you did a Firefox reset, you'll probably have to recreate your userContent.css file again (or copy it from the other PC). As I understand it, a Firefox reset wipes out all customizations in your profile.

 

1 hour ago, DrWho3000 said:

how do I do that please

sure I never did that before

 

On 3/21/2019 at 10:02 AM, mixit said:

... you can just add the following CSS snippet to your userContent.css file (it's located in the chrome subdirectory under your Firefox profile folder. Edit: as @Dave-H pointed out, the file may not exist yet, in which case just create a new text file, put this stuff in it, and rename the file to userContent.css.)

@-moz-document domain(instagram.com) {
   div.ZyFrc[role="dialog"] { display: block !important; }
}

(... you'll have to restart the browser for this to take effect, only refreshing the page won't make a difference.)

-----------------------

In other news, if you're spoofing a more current version of Firefox on all sites with ESR 52.9, apparently you'll have to drop your spoofed version below 57 on instagram starting today, because they seem to have switched over to Quantum-specific code for newer versions and basically nothing works anymore. (If you're using the default 52.9 user agent, you shouldn't need to make any changes because of this - at least it seems to work for me.)

 

[DrWho3000]

I think I found the problem it doesn't like this string in the prefs so I reset it

user_pref("general.useragent.override", "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0");

this is a string not a boolean

after doing a FF reset a few times add back in different prefs some had that string missing and I could get into Instagram, adding it in it refused to let me in, removing again back in

I removed this and it let me back in

[Dave-H]

Oh dear, it looks as if this has happened again!
Anyone else confirm?

[Mathwiz]

Confirmed. Fails on both FF 52.9.1 and Serpent 55. Looks just like before. Works in Serpent 52 (just like before).

Instagram probably changed their styling in some way that broke @mixit's fix.

[Dave-H]

Thanks.
I've been trying to tweak @mixit's code to bring it back, but no luck so far.
He did say that it might well break if they changed their "div" names.
I guess we were lucky that it worked for as long as it did!