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.

When you embed Pens on other sites, you copy and paste some HTML to do that. That HTML has some semantic content inside it of your choosing, perhaps including some code, and always including a link to that Pen. That way there is something there in case that content is syndicated through RSS and it works without JavaScript and such.

There is also a <script>, whose job it is to turn that HTML into an <iframe>. That iframe is the actual CodePen embed you’re probably used to seeing.

A user recently wrote in with a legit need to style that iframe. That iframe will always have a class name of cp_embed_iframe you can target with CSS. But in this case, they wanted to style only a particular one, not all of them on a page. There currently was no good way to do that, short of having them wrap and additional element around the embed and styling through that. We didn’t want to make this hard on them (or anyone), so we added a way to add classes to that iframe as needed.

Just put data-class="your-class" on the HTML element, and it will add that class to the iframe.

<p data-slug-hash="GCyhb" data-class="my-class my-class-special" ...>

And you’ll get:

<iframe id="cp_embed_GCyhb" class="cp_embed_iframe my-class my-class-special" ...></iframe>

Never know when little stuff like this becomes useful!