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.

UPDATE: Everything in this article is still functional, but resizing Embedded Pens has gotten a bit easier. This article is more up to date and covers all the same things.

Embedded Pens are a great way to show code and live demos on your own site. You don’t have to worry about syntax highlighting or your own sites styles conflicting with your demo. They are easy to update down the road. Plus with the ability to apply a theme to an embed, you can style them however you want, as well as update them all by simply updating that theme.

Embeds are also fluid width. Drop them in anywhere and they will be as tall as you told it to be, and 100% as wide as the element it’s in. Often times that is a blog post, where the column of (mostly) text is much narrower than the entire browser window. That’s good typically, as too-long line length is annoying to read.

But sometimes you wish the demo you are embedding wasn’t limited to the same width as text is. Of course, you’re free to style the embed however you want, including the <iframe> that ultimately ends up on your page. That iframe has a particular class, by the way:

iframe.cp_embed_iframe {
  /* style away */
}

Maybe you could make them wider than the column they sit in with negative margins. Or use some kind of :hover effect.

It came up on Twitter the other day: why don’t we make them resizeable? I’m not sure we (CodePen) want to get into adding that heavy of a JavaScript-enabled feature to third-party sites, but you are certainly free to build that. In fact, here’s a way you can do it with jQuery UI resizeable.

You’ll need a wrapping element to go around each embed. Either always do that, or write some quick JS to wrap all CodePen iframes you find. Perhaps jQuery’s .wrap() would be useful there. Then you’ll essentially have:

<div class="resize">
  
</div>

And once you’ve loaded up jQuery and jQuery UI, you can:

$(".resize").each(function() {
  
  var el = $(this);
  var height = el.height();
  var cover = el.find("> .cover");
  
  el.resizable({
    minHeight: height,
    maxHeight: height,
    minWidth: 320,
    start: function() {
      cover.show();
    },
    stop: function() {
      cover.hide();
    }
  });
  
});

Rather than make this really confusing with an non-resizeable embed of an resizeable embed (see), just check out this example in Full Page View.

This is the kind of effect that only really makes sense on large screens with mouse devices, so I’d suggest a mustard-cutting approach rather than loading everything for all browsers. Maybe even as simple as:

if ($(window).width() > 1000) {
  $.getScript("/js/stuff-for-resizing-embeds.js");
}