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.
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.
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" ...> ... </p>
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!