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.
But hey, we’re just here to tell you that Ello supports Embedded Pens in a pretty cool way!
It’s a bit like our oEmbed works. You just drop a URL into a post and it just works.
It ends up looking like this:
The difference between how they’ve done it and how oEmbed normally works is that the embed doesn’t load until you click onto it. Kinda like how you have to click to play a Vimeo video or whatever.
Once you do, it loads:
Behind the scenes, they aren’t really hitting our oEmbed endpoint at all, they just detect the URL and build it into an iframe on their own terms. Which of course is totally fine!
So there is something interesting to see before you click over, they use the URL paths we offer to screenshots, like this:
That makes perfect sense for a site like Ello, where they need to design around the possibility of any given page having who-knows-how-many embedded things from various third-parties.
Hat tip to Justin Gitlin and the Ello team for all the great work on this.
You use specially formatted HTML to indicate the media you’ll want to offer. It styles it nicely. Then the script has all the magic that can turn it into the real embed on tap. Pages built in this way will load approximately a zillion times faster.
Justin also encouraged us to offer a JSONP version of our oEmbed endpoint, so that it can be used entirely client-side. Happy to oblige, Justin.