Developercodepen.io
Can you embed CodePen in an iframe?
Yes, with the embed URL or the Embed Builder code. Change /pen/ to /embed/ in the Pen URL to get a URL for an iframe.
Checked Test again
Live check
Two links, two results
Pen pageUnreachable
codepen.io/chriscoyier/pen/nZWbMNThe site sent a bot check to our server, not the page. So we cannot read the headers that your visitors get.
Embed URLUnreachable
codepen.io/chriscoyier/embed/nZWbMNThe site sent a bot check to our server, not the page. So we cannot read the headers that your visitors get.
Steps
How to embed CodePen
- Open the Pen in the CodePen editor.
- In the editor footer, clickEmbed
- In the Embed Builder, select the tabs, the theme and the height.
- Copy the code from the Embed Builder.
- Paste the code into the HTML of your page.
Embed code
Paste this into your page
HTML
<p class="codepen"
data-height="300"
data-default-tab="result"
data-user="{username}"
data-slug-hash="{slug-hash}">
<a href="https://codepen.io/{username}/pen/{slug-hash}">{pen title}</a>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>The ei.js script changes the p element into an iframe. When your page cannot run scripts, use the /embed/ URL in an iframe.
URL patterns
Swap the link you have for the embed URL
- You havehttps://codepen.io/{username}/pen/{slug-hash}Use in the iframehttps://codepen.io/{username}/embed/{slug-hash}
Change /pen/ to /embed/. The rest of the URL stays the same.
Good to know
- Turn on click-to-load to show a preview version of the embed first. The Pen loads on click.
- Only PRO members can make editable embeds.
- Every member gets a personal default embed theme. PRO members can create unlimited embed themes.
- Set data-height to 100% to make the iframe fill its container.
Sources
- CodePen Docs · Embedded Pensblog.codepen.io/documentation/embedded-pens
- iframecheck live check · both links
Profile updated