I have a blog that I often need to insert iframes into posts for various reasons (don't ask why just trust me!)

When I use the "visual" view to edit my posts the WYSIWYG constatantly strips out my iframes ...

I know I can keep the iframes in the post if I use the "html" view and only view/save from the "html" view ... however I'd really like to be able to use the normal WYSIWYG to edit my post without having to resort to the "html" view.

Is there anything I can do to disable this behavior? I've seen this post, that suggests editing wp-includes/js/tinymce/tiny_mce_config.php, but I'd really rather avoid doing something like that that would likely just break in a upgrade!

I have a blog that I often need to insert iframes into posts for various reasons (don't ask why just trust me!)

When I use the "visual" view to edit my posts the WYSIWYG constatantly strips out my iframes ...

I know I can keep the iframes in the post if I use the "html" view and only view/save from the "html" view ... however I'd really like to be able to use the normal WYSIWYG to edit my post without having to resort to the "html" view.

Is there anything I can do to disable this behavior? I've seen this post, that suggests editing wp-includes/js/tinymce/tiny_mce_config.php, but I'd really rather avoid doing something like that that would likely just break in a upgrade!

• wysiwyg
• iframe

• Post you linked to also has non-edit filter solution by Otto. Had you tried that? – Rarst Commented Oct 19, 2010 at 7:25
• To clarify a little more, I'd rather not have to hack up some PHP to do it (I'd likely forget about, upgrade and break stuff) ... if it's a settings thing (even if that IS in PHP) or something I can do by say, wrapping a bit of code around my iframe that'd work too. At this point I'm likely going to just use some javascript to do it, but that seems messy. – Justin Jenkins Commented Oct 19, 2010 at 7:28
• 1 There is no configuration option for this, and no way to code around it in the editor (it would be a security hole if a workaround existed). Putting the mentioned code in a plugin is the best way to do this, and it will also survive upgrades (plugins are not deleted when you upgrade). – Jan Fabry Commented Oct 19, 2010 at 8:58
• @Jan, Holding out hope there is someone that knows something we don't know ... If not, thanks. Seems odd that it's a sec hole only on the visual part, not the HTML? I understand it is easier to slip things under people's noses in visual mode ... But still. – Justin Jenkins Commented Oct 19, 2010 at 9:38
• iframes are useful for embedding videos. The <object> method relies on flash, whereas the <iframe> method, which most video-sharing sites support these days, allows for HTML5 video. – TRiG Commented Jun 23, 2011 at 16:47

6 Answers 6

If you don't want to write your own code there is a plugin to allow embedding an <iframe>:

• Embed IFrame Plugin for WordPress

Then just use the shortcode like this:

[iframe http://example 400 500]

You can customize the filter of TinyMCE, see the following example for <iframe>s and other tags to use Google Maps inside TinyMCE.

function fb_change_mce_options( $initArray ) {

    // Comma separated string od extendes tags.
    // Command separated string of extended elements.
    $ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $ext = ',' . $ext;
    }
    $initArray['extended_valid_elements'] = $ext;

    // Maybe, set tiny parameter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

Add this to an custom plugin or functions.php of the theme. Also you can read more informations in my post: http://wpengineer/1963/customize-wordpress-wysiwyg-editor/

I had to upgrade to wordpress 3.2.1 and then installed Embed Iframe and it worked great.

The iframe tages were no longer removed when switching back and forth from html to Visual in wordpress.

In multisite environment every user other than superadmin get html filtering (because potential security vulnerabilities). Based on this you can add Add unfiltered_html Capability to editors.

/**
 * Enable unfiltered_html capability for Editors.
 *
 * @param  array  $caps    The user's capabilities.
 * @param  string $cap     Capability name.
 * @param  int    $user_id The user ID.
 * @return array  $caps    The user's capabilities, with 'unfiltered_html' potentially added.
 */
function km_add_unfiltered_html_capability_to_editors( $caps, $cap, $user_id ) {
    if ( 'unfiltered_html' === $cap && user_can( $user_id, 'editor' ) ) {
        $caps = array( 'unfiltered_html' );
    }
    return $caps;
}
add_filter( 'map_meta_cap', 'km_add_unfiltered_html_capability_to_editors', 1, 3 );

If you don't like to use an additional plugin for the shortcode solution, you can add something along these lines to your theme, plugin or functions.php to add it by hand. If neccessary you might need to add some more keys to the keys-array.

add_shortcode( 'iframe' , 'mycustom_shortcode_iframe' );
function mycustom_shortcode_iframe($args, $content) {
    $keys = array("src", "width", "height", "scrolling", "marginwidth", "marginheight", "frameborder");
    $arguments = mycustom_extract_shortcode_arguments($args, $keys);
    return '<iframe ' . $arguments . '></iframe>';
}

function mycustom_extract_shortcode_arguments($args, $keys) {
    $result = "";
    foreach ($keys as $key) {
        if (isset($args[$key])) {
            $result .= $key . '="' . $args[$key] . '" ';
        }
    }
    return $result;
}

Then in your post page, usage would be like so:

[iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=New+York+City,+New+York,+USA&aq=0&oq=new+york&sll=51.238455,6.81435&sspn=0.373151,1.056747&ie=UTF8&hq=&hnear=New+York+City,+New+York,+Vereinigte+Staaten&t=m&z=11&iwloc=A&output=embed"]

I found that using the Fusion Editor plugin to build my pages in Wordpress works well.

This video show how to use Fusion Builder (skip to 4:15 for the part about adding containers, coloumns, elements and code blocks): https://www.youtube/watch?v=UDyNsnB_COA

I click to add a container, then click add element, and then add a code block instead of a text block (text block will remove an iframe, but a code block will not). In my code block I paste my iframe code and publish. Works great and I don't have to modify any PHP files!