I know for a fact I have shared this tip with colleagues multiple times over the last year, because it always seems to be just tricky enough to trip someone up when writing WordPress blog posts that would benefit from live JSFiddles in an iframe. And I realize that there are plugins for this also, but you might not have access to them, or maybe you just want a simple solution. So here you go, a quick tip to save you a headache.
And it really is simple, once you’ve done it one time!
If you use the Embed option from your JSFiddle and select the option “Prefer iframe”
Then copy the snippet from the Embed Code box:
You will end up with a snippet that looks like this:
<iframe width="100%" height="300" src="//jsfiddle.net/falafelsoftware/1mgw124c/embedded/"
Which is almost, but not quite exactly what you need. If you paste this into the markup tab of your WordPress blog post, you will get:
Exactly. Nothing. The code works when you paste it in and return to the visual tab, but as soon as you save or publish, it fails to display correctly.
What you need is instead:
<a href="http://jsfiddle.net/falafelsoftware/1mgw124c/" target="_blank">Here's the full example:</a>
[iframe width="100%" height="300" src="https://jsfiddle.net/falafelsoftware/1mgw124c/embedded/" allowfullscreen="allowfullscreen" frameborder="0"]
Which looks like this, and doesn’t get wiped out during a save:
Here’s the full example:
For me, this looks completely broken in edit mode, but works perfectly once published or in preview (go figure). Enjoy!
Update 1/18/2017: Note that if the above doesn’t work for you and your WordPress hosting uses SSL, make sure your src tag uses https instead of http.
Latest posts by Falafel Posts (see all)
- Matching Complex Query String Rewrite Rule in IIS - March 22, 2017
- Using Google Services in UWP C# Apps – Part 2 - February 7, 2017
- Using Google Services in UWP C# Apps – Part 1 - February 6, 2017
- Redis Caching in the Google Cloud Platform - February 3, 2017
- Entity Framework with Google Cloud SQL - February 2, 2017