{"id":316987,"date":"2020-07-13T06:24:02","date_gmt":"2020-07-13T13:24:02","guid":{"rendered":"https:\/\/css-tricks.com\/?p=316987"},"modified":"2020-07-13T06:24:03","modified_gmt":"2020-07-13T13:24:03","slug":"lazy-loaded-prefill-embeds","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/lazy-loaded-prefill-embeds\/","title":{"rendered":"Lazy Loaded Prefill Embeds"},"content":{"rendered":"\n<p>Lemme sum this up:<\/p>\n\n\n\n<ul><li>CodePen has <a href=\"https:\/\/codepen.io\/features\/embeds\" rel=\"noopener\">Embedded Pens<\/a>. Build a Pen on CodePen, embed it on any other site.<\/li><li>We also offer <a href=\"https:\/\/blog.codepen.io\/documentation\/prefill-embeds\/\" rel=\"noopener\">Prefill Embeds<\/a>, which remove that first step. With Prefill Embeds, the Pen doesn&#8217;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. <\/li><li>Stephen Shaw details how these Prefill Embeds <a href=\"https:\/\/blog.codepen.io\/2020\/07\/09\/lazy-loaded-prefill-embeds\/\" rel=\"noopener\">can be created on-demand<\/a> through user interaction (e.g. click a &#8220;Run this code&#8221; button) so they are only there when a user wants to see them. This is a <em>super lightweight<\/em> way to add optional interactivity to any blog post or documentation.<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>I&#8217;ll put an example right here in this blog post:<\/p>\n\n\n\n<div data-theme-id=\"1\" data-default-tab=\"html,result\" data-prefill='{\"tags\":[],\"scripts\":[],\"stylesheets\":[]}' style=\"margin: 0 0 1.5rem 0\";>\n\n  <pre data-lang=\"html\" class=\"lang-html\"><code>&lt;h1>Hello from HTML&lt;\/h1><\/code><\/pre>\n  <pre data-lang=\"css\" class=\"language-css\"><code>html {\n  background: black;\n  color: white;\n  text-align: center;\n}\n\nh1::after {\n  content: \" \/ CSS!\";\n}<\/code><\/pre>\n  <pre data-lang=\"js\" class=\"lang-js\"><code>document.querySelector(\"h1\").innerText += \" \/ JavaScript\";<\/code><\/pre>\n<\/div>\n\n<script>\nArray.from(document.querySelectorAll(\"[data-prefill]\"), (el) => {\n  \/\/ Create a Click to Run button\n  const button = document.createElement(\"button\");\n  button.innerHTML = \"Click to Run Code\";\n  button.classList.add(\"button\");\n  button.classList.add(\"prefill-click-to-run\");\n  el.appendChild(button);\n\n  \/\/ On click, the element will become the embed!\n  button.addEventListener(\"click\", () => {\n    el.classList.add(\"codepen\"); \/\/ Add the codepen class back.\n    window.__CPEmbed(); \/\/ Trigger the CodePen embed script to run again.\n  });\n});\n<\/script>\n\n\n\n<p>All that code lives right here in this blog post, and the Embedded Pen iframe doesn&#8217;t load until you click to load it, which you might do if you&#8217;re interested in seeing that code run. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;t need to exist on CodePen at all. You pass in the code and settings you want to appear in the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4,17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316987"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=316987"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316987\/revisions"}],"predecessor-version":[{"id":316999,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/316987\/revisions\/316999"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=316987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=316987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=316987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}