Streaming live at 10am (PST)

Do iframes no longer work in Rich text blocks?

We have a rich text block which pulls in an iframe from a CMS article field. This previously worked fine, but for some reason is no longer parsing it properly and is instead just displaying the text.

Webflow view:

Website view:

Has something changed with the way Rich text blocks handle iframes?

Any pointers appreciated!


Here is my public share link: LINK

Like how long ago was it working? I ask because, as far as I know, you can’t embed HTML code in a rich-text element. At least for as long as I have been around +1 year. Additionally any HTML code that is in a field rendered in a template or collection list is encoded automatically by Webflow on publishing. I believe they do this for security reasons. You can use the media option in RT fields, which uses embed.ly, but the paste needs to be one of the 600+ supported embedl.ly integrations.

I use custom code to work-around this limitation with CMS fields and have done it inside RT fields as well.

To the point where I haven’t actually altered this section of the site since taking it over at least a year ago. We copy the “iframe” text from Opencritic into the CMS article’s rich text field, and the rich text block points at that field. It has always worked!

This is very bizarre.

What would be the best way to pull in this code then? An example would be:

iframe src=“https://opencritic.com/game/8241/score” frameborder=“0”
height=“102”></iframe

(open and close brackets removed so it displays here…)

The only thing that changes is the number (in this case, 8241).

So here’s the issue I have - we have hundreds of articles, all with the full iframe reference in. If I want to put a HTML embed in there, it cannot reference the Opencritic field - it simply doesn’t appear in the list. I don’t know why, is it because it’s a rich text field?

If I create a new plain text field and replace “8241” with that field, I’d then have to go back and edit every article on the site to update it with a number in that field.

There must be a smarter way of doing this surely?

You may consider finding the encoded iframe code with JavaScript, decode it, and then replace the found string with your new encoded string. That would address existing issues.

Another approach is to add a custom data value pair to any element you place in a RTF and then use that for targeting and replacement with JavaScript.