Streaming live at 10am (PST)

Embedding Instagram Into Rich Text Is Wonky, Half Works


#1

So I decided to throw in an instagram link into the embed option of the rich text editor.
Something strange happened. It actually loaded the embed, sort of.
It displays it in the editor, but then when you scroll up and down past the viewable area, it disappears. The container is still there, but the image is no longer showing.

I recognize that Instagram isn’t a supported embed (why I have noooo idea). But, it’s sort of rendering and sort of not.

Anyone have any ideas/ Or perhaps Webflow staffer might tinker?

Here’s staging link and editor link.

Staging >> http://igembed.webflow.io/
Editor >> https://preview.webflow.com/preview/igembed?utm_source=igembed&preview=166e885494be765cef2cddea37154d1a


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Instagram is a supported embed option, as it figures in the Embed.ly list of supported embeds. The rich media field should accept all links from the following providers, and present them nicely:

Your staging works fine on Chrome/Safari/Firefox on Mac. I can’t reproduce your issue. Maybe you have some chrome extensions that could make it bug? Is the issue happening in incognito mode?


#3

Hmm interesting thanks for the tip and link.

I don’t have any type of blockers on, however just yesterday chrome updated itself to 69. Something.

Are you also on the recent build that was released a couple days ago?

I’ll try it again on a different browser.

Thanks!


#4

Update to previous response.

Well I just tried it on my phone using Chrome mobile, safari, and Firefox. All three times I get the same result - half the image shows. So strange.

This time the container itself is cut off.


#5

Bugs on mobile for me too, but not on chrome 69 desktop.


#6

Thanks VINCENT.

I also just saw this on the Webflow university, and they list Instagram as the option. I’ll have to email support at this point and have them take over!

https://university.webflow.com/article/rich-text


#7

You know,

It could be an embedly issue as well. Going to their site, it lets you test out links to embed. I tried a Facebook post - no problem.

I tried Instagram, same thing, it’s cutting it off!

In this example the bottom part of the photo is cut off and the rest of its container is blank. Likely where comments go.

https://embed.ly/code?url=https%3A%2F%2Fwww.instagram.com%2Fp%2FBnbkGtog6FO%2F%3Futm_source%3Dig_share_sheet%26igshid%3D95jwgpj2gyta


#8

Yep. Probably that. And Instagram is the least of the social networks make efforts to make its content shareable.


#9

I’m also getting this issue with instagram embeds in rich text field. It’s not understanding the height of the embed it’s pulling in. Sometimes it’s slightly cut off, other times it’s cropping it 1/4.

Also happening for instagram video embeds.

This needs to be fixed. Instagram is one of the biggest social media platforms in the world. 1 billion active users. I don’t understand why this hasn’t been resolved yet.


#11

Having the exact same issue with Twitter links… For now I’ll embed my media using the method in this post Workaround for CMS Embeds.

Maybe this thread should be added to the bug forum?


#12

That other thread is awesome!
That script works like a freaking charm!

Definitely going to use this method for instagram embeds, but it also lets me add in other opt-in forms now in middle of articles… or buttons :slight_smile:


#13

A potential hint for any devs who end-up tackling this.

It looks like Webflow is recognizing these embeds as videos and is containing everything in a 16x9 aspect ratio frame.

image


#14

that’s because you’re technically using the “media player embed”, so it does think it’s a video I guess?

@vincent was kind enough to share that Webflow is using embed.ly which handles just about every url you can think of…

the message I received back from webflow support is that it handles all embed.ly embeds at a fixed height… so that’s the real reason its’ being cut off. I was told to post here and hopefully someone can add some javascript to allow for auto-height of the embed…

weird, you’d figure webflow would just make the embed heigh set to :auto;

¯_(ツ)_/¯


#15

wow…at the response you got from the webflow support team to shoot the issue back to the community. I’m having a similar issue. why would the decision be made to rendered the embed at a fixed height and not auto? I am trying to add a facebook live video which is being cutoff.