# Embedding pens from CodePen
**URL:** https://meta.discourse.org/t/embedding-pens-from-codepen/13578
**Category:** Feature
**Created:** [09.Март.2014 21:56:57 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578 "2014-03-09T21:56:57Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [29.Июль.2015 23:11:48 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/22 "2015-07-29T23:11:48Z")
Would love to hear about what security problems you had.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [29.Июль.2015 23:28:34 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/23 "2015-07-29T23:28:34Z")
There are two particular vectors that are painful
1. Playing sound, so people could create really annoying topics
2. Consuming high CPU by running stuff in tight loops with timers
Maybe the embed should have a mode where it runs nothing until the user opts in?
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [29.Июль.2015 23:31:12 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/24 "2015-07-29T23:31:12Z")
> [@sam](#):
>
> Maybe the embed should have a mode where it runs nothing until the user opts in?
Yeah, or defaulting to the non-Result tab by default, be it HTML, JS, or CSS. That way the user has to select Result to get it to run.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [29.Июль.2015 23:48:52 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/25 "2015-07-29T23:48:52Z")
Having a “click to play” mode would be ideal, as part of the embed. That is, an embed that _only_ runs when the user initiates the action.
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [31.Июль.2015 16:49:59 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/26 "2015-07-31T16:49:59Z")
Ah yes! I just wanted to make sure they weren’t really **security** concerns. **Obnoxiousness** concerns are pretty bad too though ;).
You aren’t alone here. Ello decided to write their own thingy ([Embetter](http://cacheflowe.github.io/embetter/)) for embeds so that they are only loading ALL embeds on-demand. Gitter has also asked us about sound-suppression.
I totally agree that **click-to-play** is a great plan. Especially for oEmbed, where the whole point is that ANY Pen can be embedded and it’s directed to make it easy for user-generated-content kind of scenarios. And we can leave alone the kinda “standard” embed for people who are, like, writing blog posts and want to demo their stuff more directly.
We’ll work on that and get back to you.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [31.Июль.2015 20:55:06 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/27 "2015-07-31T20:55:06Z")
> [@chriscoyier](#):
>
> We’ll work on that and get back to you.
it sure will 🙂 let us know when/how and we can turn it back on
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [15.Октябрь.2015 20:57:09 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/31 "2015-10-15T20:57:09Z")
Hey Team!
We’ve worked on a fix for this: **click-to-play** , as you suggested.
We haven’t deployed it yet, but it would be how all oEmbed embedded Pens would behave.
1. When the embed loads, you get a (very lightweight) placeholder with the title of the Pen and author and such. Plus a big “Run Pen” button.
2. If anywhere on there is clicked/tapped, it loads the embed.
Thus, no unexpected sound, no unexpected crazy CPU use, no going to a page with a zillion embeds and feeling the lag, etc.
That work for you?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [15.Октябрь.2015 21:06:38 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/32 "2015-10-15T21:06:38Z")
Sure does! Sounds great
---
### Author:  [@tholman](https://meta.discourse.org/u/tholman)
#### Post date: [20.Октябрь.2015 18:51:59 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/33 "2015-10-20T18:51:59Z")
Ok!
This has been deployed now. Everything feels pretty solid. Definitely let us know if there’s anything else you’d need, to get us enabled again 😄
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [20.Октябрь.2015 19:18:45 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/34 "2015-10-20T19:18:45Z")
Does this apply to all existing codepens, or does it have to be a brand new codepen? As we whitelisted it at our instance and I’m not seeing the improvements.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [20.Октябрь.2015 21:21:03 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/35 "2015-10-20T21:21:03Z")
@techapj can you turn codepen embeds on by default in the oneboxer now? It should be safe as they are all click-to-play per above.
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [21.Октябрь.2015 11:23:00 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/36 "2015-10-21T11:23:00Z")
I think the way oEmbed works is that it does the oEmbed request once ever, when the content is published, than just stores what it got back forever. So it maybe won’t affect all existing embeds but only newly-posted ones.
I’ll drop a test here:
https://codepen.io/gustavomodena/embed/preview/jbqdVv?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=jbqdVv
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [21.Октябрь.2015 11:29:16 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/37 "2015-10-21T11:29:16Z")
@chriscoyier, in IE and FF, we’re seeing this
But Chrome shows
Example at
[http://community.sitepoint.com/t/match-on-word-unless-this-word-precedes-it/204920/7](http://community.sitepoint.com/t/match-on-word-unless-this-word-precedes-it/204920/7)
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [21.Октябрь.2015 12:52:37 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/38 "2015-10-21T12:52:37Z")
Further review indicates it is the .background-overlay background not being taken into account
Seems both Firefox and IE have a problem with these
```plaintext
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.85) 100%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.85) 100%)
```
Because when I put
```plaintext
background: #ccc;
```
via Developer Tools in both browsers, I’m able to get a background that is more representative of what I see in Chrome.
---
### Author:  [@tholman](https://meta.discourse.org/u/tholman)
#### Post date: [21.Октябрь.2015 18:16:30 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/39 "2015-10-21T18:16:30Z")
Ahh yep!
Fixed that now, was a little mixup with the autoprefixer. Just checked firefox again, and its all good.
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [22.Октябрь.2015 15:05:32 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/40 "2015-10-22T15:05:32Z")
Okay, codepen is now whitelisted by default in onebox:
[https://github.com/discourse/onebox/commit/74713c3e09459428ff070e562d5b4aacd31c3d4b](https://github.com/discourse/onebox/commit/74713c3e09459428ff070e562d5b4aacd31c3d4b)
---
### Author:  [@chriscoyier](https://meta.discourse.org/u/chriscoyier)
#### Post date: [22.Октябрь.2015 19:36:54 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/41 "2015-10-22T19:36:54Z")
That’s wonderful. Thanks for all the feedback and help and responsiveness.
---
### Author:  [@amanuel2](https://meta.discourse.org/u/amanuel2)
#### Post date: [20.Март.2016 01:02:29 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/42 "2016-03-20T01:02:29Z")
It still dosent work… Did somone get a fix?
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [21.Март.2016 08:41:07 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/43 "2016-03-21T08:41:07Z")
Let’s see:
[http://codepen.io/ge1doot/full/MypKyq](http://codepen.io/ge1doot/full/MypKyq)
Looks just fine to me, no idea what you’re talking about.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [18.Январь.2017 11:07:45 UTC](https://meta.discourse.org/t/embedding-pens-from-codepen/13578/44 "2017-01-18T11:07:45Z")
Is this still working?
https://codepen.io/web-tiki/embed/preview/dNpgrR?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=dNpgrR
Weird.
[Предыдущая страница](https://meta.discourse.org/t/embedding-pens-from-codepen/13578.md?page=1)
[Следующая страница](https://meta.discourse.org/t/embedding-pens-from-codepen/13578.md?page=3)