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.
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.