Embedding/injecting content into component CODE show iframe tags like plaint text

[sleiter]

Hi, I have same problem. I have an attribute where I store HTML content with all tags, but when I see the content in Builder-Preview or online-Page the iframe tag is plaint text

Like that:
<iframe width="200" height="113" src="https://www.youtube.com/embed/JvgOspokONg?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen title="Ferocious Warmth - Tracey Ezard"></iframe>

Builder content link

Builder.io: Drag and drop Visual CMS

Builder public api key
23be93b22cfe43629d87e8295ec48d33

What are you trying to accomplish
I want to integrate builder on a landing page by blogs where I create the page by API.

Screenshots or video link
The EC Premium Content Insider - November 2022 edition

Code stack you are integrating Builder with
NextJS

Reproducible code example

@TimG

[TimG]

Hi @sleiter thank you for the question! It looks like you are using your own custom RichText component, do you know if the editor you are using renders iframes?

I tried using our own Text component, editing as code, and copying the exact HTML from that specific section you highlighted was able to generate the embedded video, so I am wondering if something with your editor doesn’t like iFrames or this specific use of an iFrame…

Would it be possible to use our own Text component, or even our out of the box Embed component in this specific instance?

[sleiter]

Hi @TimG Thanks for your answer, but I have the next question:

@TimG

do you know if the editor you are using renders iframes?

Where can I see that in my dashboard?

We need use the our component because we migrate a design system from our another website and we need conservate the styles.

Does that make sense?

Attach images about our component config

[TimG]

It looks like maybe you are using a <StyleProse/> component… is that a custom rich text editor? OR some 3rd party library? I couldn’t find much on that when googling around.

It seems that that component’s html prop does not render iFrames. This would have to be something that is fixed in your code base or in the 3rd party library providing the ` component since that is outside of Builder and we don’t really have any way to affect that component.

If it isn’t possible to update that component, would it be possible to use our out-of-the-box Embed element in the Builder editor just for the iframe sections of your content?