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.

Some recent changes to Embedded Pens have made it a lot easier to make them resizeable!

Let’s cover everything.

Embedded Pens are naturally horizontally flexible and responsive

They can go as wide or narrow as you need. They naturally fill the horizontal space of the container they are in.

If they are wide enough, you can do a split-panel display. If not, one panel at a time is visible.

A very simple way to add some resizeability

CSS has a way to make an element resizeble. We can use that!

.cp_embed_wrapper {
  /* required for resize to work */
  overflow: hidden;

  /* make resizeble! */
  resize: both;

  /* required to see the handle */
  background: white;
  padding-bottom: 10px;

  /* default height */
  height: 400px;
}
.cp_embed_wrapper iframe {
  height: 100% !important;
}

The huge upside to this is how easy it is. Just a few lines of CSS. There are some (fairly big) downsides though:

• The padding at the bottom of the container is weird. You have to do that, otherwise the iframe takes up the whole space and hides the resizer handle.
• Chrome and Safari only let you resize bigger not smaller, which may defeat the purpose. Firefox lets you go smaller.
• IE/Edge don’t support resize at all.

More robust resizing

The important thing here is that the Embedded Pen itself is happily flexible both vertically and horizontally, so as long as you put it in a flexible container, it will oblige.

Here’s an example using jquery-resizeable:

See the Pen Making CodePen Embeds Resizeable by Chris Coyier (@chriscoyier) on CodePen.

(An Embed inside an Embed!)

Notice this:

function __CodePenIFrameAddedToPage() {
  makeEmbedsResizeable();
}

The script (ei.js) that Embededded Pens run will fire that function (__CodePenIFrameAddedToPage()) when it’s done doing all the DOM manipulation stuff it needs to do. That way your own code that needs to look for those iframes (or the parent HTML element (<div class="cp_embed_wrapper>) can be sure it exists before it runs.

Other things to remember about Embedded Pens

• Embed iframes have a postMessage API, so you can change the tabs programmatically, if you wish.
• Embeds can have a live code editor inside them, rather than just being display code only.
• You can apply themes to Embeds, changing their colors and style, and even apply Custom CSS to take complete design control. When you use a theme for all your Embeds, it means you change the theme once and have all Embeds everywhere using that theme change at once!