Adding an iFrame to a Rich Text Field

What the best way to get this done? I know there is an embed field but that only works for youtube videos. What about non-YouTube iframe embeds?

Hello John, thanks for reaching out!

You can add any type of valid oEmbed URL to an Embed field, and if it's not compatible the other option is exactly that; using the preformatted option of the Rich Text field to add your iframe as code.

Then in your project, you'll just need to render that piece of the Rich text field as HTML. Use dangerouslySetInnerHTML to template the result:

import React from 'react'

const VideoComponent = ({ videoIframe }) => (
  <>
    <div dangerouslySetInnerHTML={{ __html: videoIframe }} />
  </>
)

export default VideoComponent

How do I make that work with prismic-javascript and the RichText component. Do I need to make a custom handler in my app I guess? Currently, RichText just renders <pre> tags as you would expect, visual chunk of HTML on the page.

Hey John,

Paulina is off today, but the method she suggested above should be used with a unique rich text field, which ONLY has the pre option activated. Alternatively you could use a key text field here.

This output of this field is then passed through the dangerouslySetInnerHTML attribute to execute the HTML.

So there isn't a way to just have a regular <iframe> in a Rich Text field, where an editor wants an iFrame in the middle of a large content block?

Hello again John

At the moment, using a Rich Text or Key Text field is the best workaround to add an iframe to your documents.

This issue has been closed due to inactivity. Flag to reopen.