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.

Last week, we pushed out a variety of improvements to Embedded Pens! Here’s a quick rundown of what’s new.

Vertically Responsive

Some folks add a little interactivity to Embedded Pens on their side. For example, putting them inside resizable containers so readers can expand and contract them as they need, to expose more code or check out responsive styles.

Here’s what Chris is doing on CSS-Tricks:

(We’ll do a tutorial on that soon!)

This seems like a no-brainer, but before this recent update, our embeds were only flexible horizontally, not vertically. Meaning if the container they were inside of changed height, they would remain stuck at the height they loaded at. No more! Embedded Pens are now happily flexible both vertically and horizontally.

You can also now pass in height: 100% to the embed code, and make the <iframe> vertically responsive right off the bat. If you do this, you’ll need to style the .cp_embed_wrapper wrapper yourself, otherwise the <iframe> will be its default height based on the browser’s user agent stylesheet (150px, usually).

We’ve added these changes to the embedded Pens docs.

Side bonus: they now can squish horizontally down to about 230px, so even in super-narrow containers they should be OK.

Another thing to remember: As a PRO member you get Unlimited Embed Themes, and Custom CSS for embeds, giving you complete control over the look of an Embedded Pen.

Callback

Our recommended method for embedding Pens is the copy-and-paste code from the Embed popup. That is some HTML code, including a <script> that handles placing the Embedded Pen on the page. Like any JavaScript, it needs to download and run. Sometimes you want some other JavaScript to run after this is completed (for example, you want to find all the iframes and make them resizeable!).

Now, if you define a function called __CodePenIFrameAddedToPage, we will call that function after the script is done inserting iframes onto the page.

You would write:

function __CodePenIFrameAddedToPage() {

  console.log("do extra things here");

}

oEmbed now using v2 embeds

Now any site using oEmbed to insert Embedded Pens (like Medium, WordPress, Discourse, etc) will display the “v2” embeds. v2 Embeds are nicer and more functional in all ways, so that’s a good upgrade. In fact, it was a bit of a (cough) mistake that we weren’t doing this already.

Lazy Loading Creator Avatars

A little known feature about the CodePen embeds is that if you deselect all of the code tab and the result tab, you get some information about the Pen’s creator. These images now lazy load, to keep our embeds that little bit leaner!

That’s all folks (for now!)

Those are all the latest changes. If you’re interested in more about what you can do with embeds, here are a few useful links:

And, as always, if there are any requests or features that pop to your mind, reach out to us or comment below!