Mastodon embeds not displaying on public facing pages

joshua_davis commented

2024-05-22 15:40:40 +00:00

(Migrated from gitlab.com)

What it says in the title. Just tried embedding a toot (yes, I am still hanging onto that term) yesterday and for some reason, while it renders fine in the back-end editor, it doesn't appear on the public-facing page after saving it. I tried querying the Masto braintrust about it and made this much headway on figuring out what the problem is (see link).
https://social.coop/@GuerillaOntologist/112485081498910244

What it says in the title. Just tried embedding a toot (yes, I am still hanging onto that term) yesterday and for some reason, while it renders fine in the back-end editor, it doesn't appear on the public-facing page after saving it. I tried querying the Masto braintrust about it and made this much headway on figuring out what the problem is (see link). https://social.coop/@GuerillaOntologist/112485081498910244

joshua_davis commented

2024-05-22 15:40:47 +00:00

(Migrated from gitlab.com)

assigned to @mlncn

FreeScholar commented

2024-10-01 00:49:39 +00:00

(Migrated from gitlab.com)

@joshua_davis I have hopped in to take a look and will be talking to Ben and Keegan on 10/1.
I will do my best to get some action/info/update on this by the end of this week.

@joshua_davis I have hopped in to take a look and will be talking to Ben and Keegan on 10/1. I will do my best to get some action/info/update on this by the end of this week.

MegaKeegMan commented

2024-10-03 00:29:52 +00:00

(Migrated from gitlab.com)

Getting closer to figuring this out. The major part of the problem is related to this file: web/themes/custom/geofresco/src/global/js/responsive-iframes.js

Commenting out the content of this file, I am able to get an i-frame to display. While it is there, it is not styled great.

Here is the commit where this all started 5 years ago: c020254a62

The script has been moved since it was first added, but it looks like it was a quick work-around due to an issue with Bulma setting a "height of auto and squashing them down" (them being the embeds), per the commit message. I can confirm that I am dealing with the exact same issue now when I uncomment the script. It looks like this was first put into place for making iframe embedded videos responsive.

Leaving this here for when I continue trying to figure this out tomorrow.

Getting closer to figuring this out. The major part of the problem is related to this file: `web/themes/custom/geofresco/src/global/js/responsive-iframes.js` Commenting out the content of this file, I am able to get an i-frame to display. While it is there, it is not styled great. Here is the commit where this all started 5 years ago: c020254a62f2dce7fe40e7c37b215781b97530d5 The script has been moved since it was first added, but it looks like it was a quick work-around due to an issue with Bulma setting a "height of auto and squashing them down" (them being the embeds), per the commit message. I can confirm that I am dealing with the exact same issue now when I uncomment the script. It looks like this was first put into place for making iframe embedded videos responsive. Leaving this here for when I continue trying to figure this out tomorrow.

MegaKeegMan commented

2024-10-03 00:34:51 +00:00

(Migrated from gitlab.com)

And last little detail, it looks like the script was changing the contents of the embed from:

<iframe src="https://social.coop/@GuerillaOntologist/112485081498910244/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://social.coop/embed.js" async="async"></script>

to

<iframe class="mastodon-embed" src="https://social.coop/@GuerillaOntologist/112485081498910244/embed" allowfullscreen="allowfullscreen" style="width: 831px; height: 0px; overflow: hidden;" scrolling="no" height="254"></iframe>

which set the height to 0px among other things

And last little detail, it looks like the script was changing the contents of the embed from: ``` <iframe src="https://social.coop/@GuerillaOntologist/112485081498910244/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://social.coop/embed.js" async="async"></script> ``` to ``` <iframe class="mastodon-embed" src="https://social.coop/@GuerillaOntologist/112485081498910244/embed" allowfullscreen="allowfullscreen" style="width: 831px; height: 0px; overflow: hidden;" scrolling="no" height="254"></iframe> ``` which set the height to `0px` among other things

mlncn commented

2024-10-03 18:22:28 +00:00

(Migrated from gitlab.com)

EDIT: This is embedding single posts, not a feed, my RSS comment does not apply: One thing, this is a widespread need and we should make it possible to bring in via Mastodon RSS feeds which is always going to be more robust than an iframe.

But iframes should absolutely not be getting quashed, and the current version of Bulma fixed that problem, so we should upgrade the theme: #126

EDIT: This is embedding single posts, not a feed, my RSS comment does not apply: One thing, this is a widespread need and we should make it possible to bring in via Mastodon RSS feeds which is always going to be more robust than an iframe. But iframes should absolutely not be getting quashed, and the [current version of Bulma fixed that problem](https://github.com/jgthms/bulma/issues/2622), so we should upgrade the theme: #126

MegaKeegMan commented

2024-10-03 21:02:00 +00:00

(Migrated from gitlab.com)

mentioned in commit 3231199c04

mentioned in commit 3231199c049abe23688a8ec03c63d0ae075932d3

mlncn commented

2024-10-03 23:29:55 +00:00

(Migrated from gitlab.com)

@joshua_davis Keegan hotfixed this on the live site.

mlncn commented

2024-10-03 23:30:12 +00:00

(Migrated from gitlab.com)