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.
We love embedded Pens, and especially our oEmbed feature, which makes it incredibly easy to embed a Pen on platforms like WordPress, Medium, and Discourse, to name a few. But, sometimes embedded Pens can be a little bit problematic. For instance, if the Pen plays sound or triggers an
alert() (things that we allow on purpose). Or, if there are lots of Pens on the page it can be painful for page performance.
Starting now, oEmbed embedded Pens will load in a preview state! This is a much lighter-weight and simpler view, featuring the Pen’s title, author, and a Run Pen button.
Clicking anywhere on it will load the embed immediately.
At the moment, this preview state is only shown for oEmbed embedded Pens. If you’d like to use it for normal embeds, just add
data-preview="true" to the HTML embed code. We’re working on adding this feature to themes, so stay tuned for that.