Embedded Pens Now Available as iframes

December 30, 2014

Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Embedded Pens are always ultimately iframes, but now we're offering <iframe> style embed code right from the Embed Builder. We still recommend the HTML embeds, but the straight iframe might be useful in some situations.

The reason that we went with HTML embeds (basically a <p> or <div> with information about the Pen and a link to it on CodePen that gets turned into an <iframe> with JavaScript) is progressive enhancement. That paragraph of information will always be correct and requires no special technology to be correct. Then if JavaScript is available and iframes are supported, the embed comes in.

Even more importantly, embeds are most often used in blog posts. Some people read blogs through RSS. RSS readers traditionally have stripped out iframes. Just totally removed, nothing left, not even the fallback stuff (e.g. <iframe>fallback</iframe>) that we provide. It's a much better RSS reading experience if there is at least a link to the Pen.

I'm sure this is true for most feed readers still. But I noticed in Feedly, the one I happened to be using at the moment, that iframes are no longer stripped but show a "Tap to load frame" box instead. If you tap it, the iframe will load. Embedded Pens through RSS! At least in Feedly anyway, nice!

So that's one reason you might want to use iframes. You might have others. Perhaps you aren't allowed to or don't want to run third-party JavaScript on the site you want to embed on. Perhaps you need complete control over the iframe HTML to do something unique.

As I said, we still recommend sticking with the regular HTML embeds for the most part since it's guaranteed you'll get a working fallback, but now the choice is up to you.