WordPress Stripping iFrame Elements? Here’s the Fix.
Elements like Google Map embeds get stripped out. Here’s the Fix.
If you have ever tried to enter a Google Map embed into a WordPress page or post, you’ve noticed that switching between “Visual” and “HTML” view in the page or post edit window strips the iFrame out–leaving you with broken code that displays nothing. Luckily, there is a fix.
You’ll need to find the functions.php file in your active theme folder. It’s a standard WordPress file, so it’ll be there. Next, we are going to add two short functions that change the way the WordPress editor handles iFrame code. You’ll want to insert the following lines of code before the closing “?>” of your functions.php file.
// this function initializes the iframe elements
function add_iframe($initArray) {
$initArray['extended_valid_elements'] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
return $initArray;
}
// this function alters the way the WordPress editor filters your code
add_filter('tiny_mce_before_init', 'add_iframe');
That’s it. You can test your mod by entering some iFrame code in the editor window and switching between the visual and HTML editor.
Thanks for the post Nick, really search engine marketing has changed a lot in couple of years, let’s hope for the best. Thanks
Nick…Michael, whatever.
Thanks for the fix for this, looked all over the web for this particular answer. Worked perfectly.
With such hack you may break future WordPress versions.
WordPress removes iframe when you switch from “HTML” to “Visual” tab in your editor because of the security reasons.
You can use this plugin to insert iframe into post content using such shortcode: [iframe width=”640″ height=”480″ src=”http://player.vimeo.com/video/3261363″]. This way is much more flexible.
With your hack you may break future WordPress versions.
WordPress removes iframe when you switch from “HTML” to “Visual” tab in your editor because of the security reasons.
You can try this plugin to insert iframe into post content using such shortcode: [iframe width=”640″ height=”480″ src=”http://player.vimeo.com/video/3261363″]. This way is much more flexible.
True, future versions might not work. That said, we advise our clients against installing a plug-in for something that can be solved at the theme level. I’ll probably get in trouble for saying this, but Plug-ins generally reduce WordPress performance.
FINALLY a simple solution that REALLY works!
I had to filter through dozens of posts in trendy blogs made by trendy idiots that don’t have a clue about what they are writing saying they had “solved the problem” and then introducing a plugin that even when it’s installed if you switch to visual the iframe STILL disappears.
Thank you Michael for making this solution available, I’ll be linking to this post soon.
Thanks, Michael, I spent 24 hours trying to fix the problem. Finally i found the solution :)
What web-developer said earlier might be true, but same true is for plug-ins – authors sometimes loose interest in developing their plugins and this fact can bring the whole website down. That happened to me few times already. I prefer to stick to this version of hack and hope that Michael will find an alternative once the hack has been plastered up.
Disabling Visual Editor ir profile does the job too and needs no coding or plugins.
Thank you so much. This is a much better solution than adding another plugin into the mix.
By the way, I really like the look and feel of your blog.
Thanks for this but it’s not fixed my issue – I’m trying to embed vimeo videos and despite wordpress now not stripping out the iframe because I’ve added this code to the functions.php file, it doesn’t display the vimeo video text info – like the title and byline – for some reason all the text gets stripped out and all you’re left with is the button to switch to full screen mode and the play icon.
Hmmn…you might have something else going on with your template. Each wordpress template has a functions.php file, so they are subject to some variation. Another option for you might be to use of the alternative text editors for wordpress which replace the default text editor in the admin.
Thanks, that iframe mauling was annoying; working fine for wordpress ms 3.0.1
would be good to see a ‘super’ functions.php in wp multisite to take functions wanted across all themes
You just saved me HOURS of time/hassle/etc. Thanks for posting this.
The fix works great except:
When I define the width and height in a CSS style sheet and not in the iframe itself the visual editor inserts its own width and height values. Is there a way to prevent this?
Example – Custom CSS
#IDXSearchBox {width:900px; height: 800px; overflow-y: scroll; overflow-x: hidden;}
Then this
Gets turned into this
I put the HTML in the previous post and assume it was taken out. I’ve used [ and ] here to allow the code to show:
Then this
[iframe id=”IDXSearchBox” src=”http://mrmlsmatrix.com/Matrix/public/IDX.aspx?idx=####”][/iframe]
Gets turned into this
[iframe id=”IDXSearchBox” height=”240″ src=”http://mrmlsmatrix.com/Matrix/public/IDX.aspx?idx=####” width=”320″][/iframe]
Oh dear, finally I’ve find something that really works!
Thank you so much
Thanks for posting but dear it’s not working for my side. WordPress again strip my iframe code.
Any help please ?