Please keep in mind that the https://designcode.io/ website being pulled in as a thumbnail is an 11.1MB download. If you're doing this to simply avoid using an external service I would advise against this, as it's pretty user hostile.
Thanks! Yes, this is probably a terrible example for the demo, but this technique can and is used in many web applications utilizing user-generated content (for example, codepen).
My first thought after I finished reading was, that this is going to impact performance pretty badly. I find codepen in some cases has issues because of the iframed websites, especially if I am on a slow connection.
I would love if you mentioned the performance considerations in your post.
I'm sitting currently at a railstation and this codepen snippet took 6 Minutes to load. Please, don't ever use that on production-ready sites :( Nice idea tho ;)
I spent some time recently documenting the process we used for this technique. Hopefully this is useful to other designers as well. Feedback appreciated. Thanks!
Thanks for putting this together!
I've explored this approach in the past but abandoned it as it wasn't a good fit for the type of project I was working on. But it's a really cool technique for a case where there are limited numbers of "thumbnails". Especially for a site like Codepen with a very light footprint for each "Picked Pen".