如何在没有 CodePen 框架的情况下将 CodePen 中的笔嵌入网站

Question

Is it possible to embed a pen from CodePen into a website without the default frame/navigation bar? In other words, is it possible to get rid of the bar across the top and bottom of the pen? Thanks!

Answer 1

You can do it by setting the data attribute on the embedded code snippet like so -

data-show-tab-bar='no'

or in the Embed Theme Builder by choosing 'hide' option in the Tab Bar dropdown. However, this is a PRO feature, and will only work if you have PRO version of the codepen.

Answer 2

If you don't want to pay for the Pro version of Codepen, here's another option:

1. Export and download your Codepen project
2. Upload files to a Github Pages site
3. Embed the Github Pages project URL in your desired location.

 <embed src="username.github.io/project_name">