Posted on by Chris Coyier

Making a CodePen Embed Resizable is Easy!

Just a little CSS. If you use the default recommended HTML embed code, the <iframe> that is ultimately the CodePen Embed itself is wrapped in a <div>:

<div class="cp_embed_wrapper">
  <iframe ... ></iframe>
</div>

That outer <div> gives you an opportunity to make embeds resizeable or do whatever other styling you might want. You could also put your own wrapper around it, whatever floats your boat.

The very easiest bit of CSS to apply to your page to make the embed resizble:

.cp_embed_wrapper {
    overflow: hidden;
    resize: horizontal;
}

Wanna resize both ways?

.cp_embed_wrapper {
    overflow: hidden;
    resize: both;
}
.cp_embed_wrapper > iframe {
    height: 100%;
}

Here’s a version that stays centered and has a little bonus styling. As an embed, so meta!

The post Making a CodePen Embed Resizable is Easy! appeared first on CodePen Blog.

CategoriesUncategorized