How to upload vimeo videos using Media plugin (and not HTML option)

I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.

I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.

The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):

<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430开发者_StackOverflow中文版948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>

While Vimeo videos need the following HTML for being displayed:

<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>

Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.

So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?

Well, you should write your own plugin (it is pretty simple) to check for changes the user made. When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).

Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):

// you may choose an other event to check for
ed.onChange.add(function(ed){

  var body = ed.getBody();

  // check for vimeo using jquery object
  $(body).find('param').each(function(index, Element){
    // vimeo adress is found in value
    if (this.value.search('http://vimeo.com') == -1) return;
    var node = this;
    var iframe_not_parent = 1;    
    while(node.nodeName !== 'body'){
      node = node.parentNode;
      if (node.nodeName !== 'iframe'){
        iframe_not_parent = 0; 
        break;
      }
    }

    // ok, this vimeo thing is not inside an iframe - put it inside
    if (iframe_not_parent){

        with(document.getElementById(iframe_id).contentWindow){         
          var new_iframe = document.createElement("iframe");
          this.parentNode.parentNode.append(new_iframe);
          new_iframe.append(this.parentNode);
        }
    }
  });
});