Webmasters Gallery

Lemme sum this up:

• CodePen has Embedded Pens. Build a Pen on CodePen, embed it on any other site.
• We also offer Prefill Embeds, which remove that first step. With Prefill Embeds, the Pen doesn’t need to exist on CodePen at all. You pass in the code and settings you want to appear in the embed via code blocks sitting on the page (progressive enhancement!). Now that code can live in your Git repo or database, which might offer a more desirable level of control.
• Stephen Shaw details how these Prefill Embeds can be created on-demand through user interaction (e.g. click a “Run this code” button) so they are only there when a user wants to see them. This is a super lightweight way to add optional interactivity to any blog post or documentation.

I’ll put an example right here in this blog post:

<h1>Hello from HTML</h1>

html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}

document.querySelector("h1").innerText += " / JavaScript";

All that code lives right here in this blog post, and the Embedded Pen iframe doesn’t load until you click to load it, which you might do if you’re interested in seeing that code run.

Direct Link to Article — Permalink

The post Lazy Loaded Prefill Embeds appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.