It just became too annoying: every time we go back to edit a post that has some kind of iframe embedded in it, like a video or a Slideshare presentation, the HTML inevitably gets stripped out when we work in the visual editor, and we have to re-insert the code. For some reason, the TinyMCE editor thinks it’s helpful to strip iframe HTML when users are in visual mode.

I know – if we disable the visual editor, everything will work fine. But that’s not always an option, and it shouldn’t be necessary. The visual editor is one of the reasons that WordPress is such a great web platform – it makes WordPress accessible to all levels of users.

So I went on a quest to find a solution. The only thing I found was the Embed Iframe WordPress plugin, but I lost patience with it. I asked for a solution on the LinkedIn WordPress group, and Marjorie Roswell suggested I check out the plugin. So I gave it another chance, and it works. It could be more intuitive to use, but in the meantime it’s something.

Get the embed code for the media you want to embed in your site. Let’s use Barry Abrahamson’s Slideshare presentation on High Performance WordPress that he delivered at WordCamp Jerusalem as an example. Here’s the embed code:

You need three parameters from any iframe embed code you are using: the URL, the height, and the width. I have highlighted those parameters in the code above. You enter these parameters in the following format in either the visual or HTML part of the editor:

Miriam is the friendly CEO of illuminea, a WordPress design and development agency, and Strattic, a static publishing platform for Open Source CMSs. Miriam is a huge fan of WordPress and has been using it for over ten years. In addition, Miriam has organized the past five local Israeli WordCamp conferences.

I’ll have to give the plugin another look. I had the same reaction and thought the process was a bit clunky (in hindsight, I think I’m just spoiled because so much in WP is so easy). Thanks for the review and tip!

WordPress strips out straight HTML, too. I often do tutorials with numbered steps and insert images for some of the steps. So, in the <ol> tag I need to add a start number so that the steps don’t all start with #1. For example, <ol start=”3″>. If I go back to the Visual tab and then publish, Word Press strips out my start numbers! I’ve learned to do that part last, just before publishing, but it’s annoying. Any suggestions?

About WPGarage

This is where Rebecca and Miriam from illuminea (and sometimes others) document things they've learned about WordPress. Even after nine years in the field, we're always learning new things about WordPress. Hope this helps you too.