When you open up the Embed modal in the Pen Editor, this is where you get the copy-and-paste code for Embedded Pens. You can do lots here, like change the theme, flip on an option to make the embed have a live editor, adjust the height, and also enable the click-to-load feature.
The purpose of the click-to-load feature is to reduce the weight of the Embedded Pen. Rather than seeing the
<iframe> preview of your code up front, you see a covered area (that has a screenshot of your preview) and a Run Pen button instead. You click it to literally run the Pen and see the live preview. Here’s a live example:
Before this release, the overlay for click-to-play embeds covered the entire embed area. Meaning you couldn’t see anything at all in the embed until you clicked that Run Pen button, then the whole embed loaded up.
After this release, it’s only the preview area that is covered and not rendered until the Run Button is pressed.
The spirit of the original style was to make the Embedded Pen as lightweight as possible. That overall weight depended on the screenshot to some degree, but was generally in the 20 KB range. This new style is around 40 KB. So they are heavier, but ultimately, not by much. What does that buy you?
- You can actually see your theme right away
- You can see the code (if you have one of them open as a default panel) right away
It’s more useful and more obvious what you are looking at. We think those two things are pretty big improvements and make these click-to-run embeds a lot better. They are still pretty lightweight, and might only be a small fraction of the size of the complete embed once a user runs it. For example, you might be demonstrating some React animation concept. Well, with click-to-run, the user isn’t loading a full blown copy of React and an animation library and incurring the CPU and memory cost of this animation until they want to see it. That’s still a big performance boon.
Why the change?
This was inspired by the Vue team. The brand new Vue 3 docs use CodePen throughout. For example:
The Vue team is very performance conscious. They very much preferred the click-to-run version of our embeds (because of the fast-loading), but the experience was too minimal. We worked with them to find a good solution, and ultimately decided this style of click-to-run embed would be best for everyone, so we rolled it out globally.
Anywhere that uses oEmbed will see this version of the embeds also, meaning that all default WordPress embeds, Medium posts, Discourse forum posts… really anywhere that supports oEmbed will have this new, better style of embed:
Oh, and click-to-run works with Editable Embeds and Prefill Embeds as well:
- With Editable Embeds, as soon as you click Run Pen, the editor becomes active. This is a big performance savings for those, because Editable Embeds need to load quite a few additional resources to make the live editor work.
- With Prefill Embeds, you use
data-preview="true"on the wrapping
<div>and that will trigger click-to-play mode.