CODEWITHSUNDEEP
htmlcodepen
seyi
seyi

Reputation: 121

Embed CodePen not rendering on site

The following code has been added to my webpage and should render the live CodePen image, but instead it shows displays a link:

<p>Fitness app</p>
<div class="w3-half w3-grayscale-max">
  <p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>

Any ideas about why the CodePen isn't fully rendering? Thanks!

Upvotes: 0

Views: 1216

Answers (2)

ON1 Digital
ON1 Digital

Reputation: 11

The CSS you'll also need to convert. Its in SCSS, not plain CSS. Luckily Codepen has options to view compiled HTML and CSS in the little arrow dropdowns so that helps. The other bit missing is, you are going to have to hook it up with some actual programming logic to make the animation advance with the steps.

Upvotes: 1

Matt Smith
Matt Smith

Reputation: 2158

On your CodePen page, click the Embed button in the lower right corner. From there you can select how you want the pen to display as it's embedded on your webpage. Then select the Copy & Paste Code.

It looks like the snippet in your question doesn't have the necessary data attributes:

<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen <a href="https://codepen.io/seyicole/pen/Njmvae/">Fitness app</a> by seyi (<a href="https://codepen.io/seyicole">@seyicole</a>) on <a href="https://codepen.io">CodePen</a>.</p>

You can read more about embedding pens on CodePen's blog.

Upvotes: 0

Related Questions