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>Code language: HTML, XML (xml)

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;
}Code language: CSS (css)

Wanna resize both ways?

.cp_embed_wrapper {
    overflow: hidden;
    resize: both;
}
.cp_embed_wrapper > iframe {
    height: 100%;
}Code language: CSS (css)

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

Resizeable @CodePen Embed?

Add to your pages CSS:

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

Or just `horizontal`. Maybe a little `margin-inline: auto;` to center if you like that. More tricks in vid. pic.twitter.com/XXY7gAbgDB

— Chris Coyier (@chriscoyier) November 9, 2022