Forem Creators and Builders 🌱

Lee
Lee

Posted on

Embedding iFrame in the editor

Hi there!

Is it possible to embed an iFrame in the markdown editor where a liquid tag isn't supported, or maybe a work around (using codepen or similar)?

Many thanks!

Top comments (10)

Collapse
 
ellativity profile image
Ella (she/her/elle)

Hey @lee - thanks for this question. I think it's part of a general question about HTML functionality in posts that was raised separately with me by @oli and it would be helpful for me if I had a better idea of what you're trying to achieve?

Are you wanting to just iFrame anything, or something specific? Because if it doesn't feel like it's HTML-able, liquid tags are being revised right now, so that might be another angle to consider for your specific situation.

Collapse
 
lee profile image
Lee

Hey @ellativity !

I am looking to embed an iFrame (from another site) in a post. I read that markdown supports it but it isn't displayed in the Forem editor once previewed.

Ooo liquid tags eh? That sounds exciting, what's happening :D

Collapse
 
ellativity profile image
Ella (she/her/elle)

Sorry @lee , having a slow day. I had a hunch that iFrames are among the HTML tags that we don't allow on Forems, and was able to get confirmation from someone much wiser than me. The inimitable @djuber says

a header x-frame-options: SAMEORIGIN is set on the site for all responses, preventing iframes from rendering remote content (even if we permitted them in the markdown editor) - and this header is disabled/removed for liquid embedded frames when we show them (we remove this header from the response only for the liquid embed content, which is fetched separately at /embeds/)

Can I confirm you've exhausted the options for currently available liquid tags and nothing does what you need it to do?

Thread Thread
 
lee profile image
Lee

Heya 👋 Well since I replied, I have instead inserted the iFrame into a codepen and then used a codepen liquidtag to display it.

@djuber thanks for helping out, let me know if there is a better way to do it.

Thanks!

Thread Thread
 
ildi profile image
Ildi

code pen liquid tag embed screenshot

I did not know about this workaround for embeding iFrame content. I have also been wanting to embed content that we do not have a liquid tag for yet.

Is there a way to remove the "html, css, js" bar at the top and the bar at the bottom of codepen embeds?

Thread Thread
 
lee profile image
Lee

I dont think there is

Thread Thread
 
ildi profile image
Ildi

I feared that was the case. Hopefully we can solve for this issue. I’m looking to embed audio players from multiple platforms like Bandcamp, Audiomack, and Audius, for which we do not have liquid tags yet.

Thread Thread
 
ellativity profile image
Ella (she/her/elle)

@ildi and @lee I have great news for you both (as well as a lot of other people) coming soon ☺️

For now, you should just know that we are introducing a more generalized "embeds" functionality that will give you more freedom and versatility to embed content into your Forem without needing to request liquid tags. Just a little longer...

Thread Thread
 
ildi profile image
Ildi

This is great news! Thank you for sharing that with us @ellativity

Thread Thread
 
lee profile image
Lee

Brilliant! thanks so much for following this up :D