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.

18 replies
  1. Derrick T Spruiell says:

    Thanks for the post Nick, really search engine marketing has changed a lot in couple of years, let’s hope for the best. Thanks

    Reply
  2. web-developer says:

    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.

    Reply
  3. web-developer says:

    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.

    Reply
    • TastyPlacement (Michael) says:

      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.

      Reply
  4. Pedro Gomes says:

    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.

    Reply
  5. Vilius says:

    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.

    Reply
  6. Andy says:

    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.

    Reply
  7. Evie Milo says:

    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.

    Reply
    • Michael David says:

      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.

      Reply
  8. silver darling says:

    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

    Reply
  9. Jim says:

    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

    Reply
  10. Jim says:

    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]

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *