Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to embed an iFrame, and because I set up some CSS using responsive design, I wish to NOT have width="" and height="" attributes whatsoever.

When I type this into the HTML editor field..

<iframe src="https://docs.google.com/document/pub?id=1fsm-cvpdfX-8tXauGrQgRmgWONTpX8J3almvZhzBeCA&amp;embedded=true" class="scale-with-grid"></iframe>

And then I switch to visual mode and come back, it immediately removes the class="scale-with-grid" and changes it to width="320" height="240"

<iframe src="https://docs.google.com/document/pub?id=1fsm-cvpdfX-8tXauGrQgRmgWONTpX8J3almvZhzBeCA&amp;embedded=true" width="320" height="240"></iframe>

How do I avoid this? I used this "Raw HTML" plugin but it didn't apply to this iframe situation whatsoever.

share|improve this question
1  
possible duplicate of Make WordPress WYSIWYG not strip out iframe's –  Chip Bennett Aug 22 '12 at 23:53
1  
Please search the WPSE site for related questions before posting new questions. This one has been asked and answered several times already. –  Chip Bennett Aug 22 '12 at 23:54
    
I searched with "iframe", "HTML", "visual" while entering the new question. Existing questions with similar strings came up but not that one. Thanks for finding it for me. –  jeffkee Aug 23 '12 at 0:38
2  
Try using "tinymce" when searching for questions related to the visual editor. :) –  Chip Bennett Aug 23 '12 at 0:42
1  
This answer from @bueltge should solve your problem. Does it? –  toscho Aug 23 '12 at 1:40

2 Answers 2

You could make use of an iframe-shortcode. Here's a small plugin to allow that:

<?php
! defined( 'ABSPATH' ) AND exit;
/** Plugin Name: (#62729) Shortcode to display an iframe */

function wpse62729_allow_iframes_tinymce( $attr )
{
    global $post;

    $attr = shortcode_atts( array(
         'src'          => ''
        ,'width'        => '100%'
        ,'height'       => '100%'
        ,'name'         => md5( $post->post_title )
        ,'scrolling'    => 'no'
        ,'marginheight' => 0
        ,'marginwidth'  => 0
        ,'frameborder'  => 0
        ,'align'        => is_rtl() ? 'right' : 'left'
    ), $attr );

    $html = "<iframe";
    foreach ( $attr as $key => $val )
    {
        $html .= " {$key}='{$val}'";
    }
    $html .= "><p>";
    // Message if not possible to display iframe
    $html .= sprinft( 
        'Displaying the iframe is not possible. View the %ssource following this link%s.'
        ,"<a href='{$attr['src']}' target='_blank'>"
        ,"</a>"
    );
    $html .= "</p></iframe>";

    return $html;
}
add_shortcode( 'iframe', 'wpse62729_allow_iframes_tinymce' );
share|improve this answer
    
why an shortcode for an default tag, its more to parse the content and stopper for performance? The TinyMCE can iframe, only the class attribute is an problem in the current version, but the id attribute works and is a chance for custom style. –  bueltge Sep 9 '12 at 15:26
    
@bueltge It's just an alternative approach to get around missing (some) support for TinyMCE quickly. –  kaiser Sep 9 '12 at 15:29
    
Yes, this is. But I see many problems of long exists webspace, there use shortcodes for a while and not supportet now. –  bueltge Sep 9 '12 at 15:32
    
@bueltge I'm not sure, if I understood you correctly (just explain it again in german - you can delete it later), but at least it's a plugin. –  kaiser Sep 9 '12 at 15:36
1  
This works perfectly fine! Found a plug-in myself actually, had to make minor mods. web-profile.com.ua/wordpress/plugins/iframe –  jeffkee Sep 11 '12 at 22:24

On default is the iframe tag a not allowed tag in the editor. You must change the filter for allowed this html tag. Copy the follow source in a plugin and allow iframe for the editor TinyMCE.

add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );
function fb_change_mce_options( $tags ) {

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

    if ( isset( $tags['extended_valid_elements'] ) )
        $tags['extended_valid_elements'] .= ',' . $ext;
    else
        $tags['extended_valid_elements'] = $ext;

    return $tags;
}
share|improve this answer
    
I think we need class attribute more. –  Rilwis Sep 4 '12 at 9:53
    
Have you actually tried this in latest WordPress, and was it successful? I can't get this to work with iframes specifically, after adding both class attribute and setting paste_strip_class_attributes to none. it seems iframe is a special case. –  Milo Sep 4 '12 at 13:57
    
@Milo: yes, you have right. I have tested now and the class attribute was always filtered. But I have not find an solution in the small time frame, where I tested this. –  bueltge Sep 5 '12 at 10:07
    
This problem for class attribute is an TinyMCE problem and I dont find an solution; only an custom init in oninit param was possible, but this is a great overhead for this requirement. –  bueltge Sep 5 '12 at 11:59
1  
I think the solution for allow class on iframes is the embed plugin; maybe little bid to much, id is possible, bute usable; see the embed plugin –  bueltge Sep 5 '12 at 12:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.