When switching from html to visual editor the tag gets corrupted

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.

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;
}