How do I embed a CodePen in my web page?

Question

I tried adding a CodePen (from codepen.io) to my web page, but it does not show up the way I want it to. It only shows the text: 'See the Pen ... on CodePen'. The picture I added shows the embed window on CodePen.

How I can properly embed the Pen, so it completely shows up on my webpage? Sorry if this is a really dumb question, I am still a complete noob in HTML.

Answer 1

To use this locally, replace

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

With

<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>

Why?

As you can see, the default script's src starts with //assets....

They removed the protocol in the URL so that it automatically matches your own. This is common practice, because https sites don't allow scripts to be loaded with http URLs.

So, if your site uses http, the script will be loaded with http. If your site uses https, it will be loaded with https.

But if your site is not on a server, and is opened with the file:/// protocol, it just won't find that resource on your machine, so you need to specify the protocol to use.

Answer 2

I'm wondering if perhaps your page is not online yet. I recently embedded codepen into my own webpage and I noticed that I couldn't see it on my computer locally but when I uploaded my html to my server, it was there.