[wp-trac] [WordPress Trac] #28190: Support for mediaelement.js YouTube sources in the video shortcode does not work in TinyMce

[WordPress Trac]

#28190: Support for mediaelement.js YouTube sources in the video shortcode does not
work in TinyMce
--------------------------+-----------------------------------------
 Reporter:  Fab1en        |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.0
Component:  Media         |     Version:  3.9
 Severity:  normal        |  Resolution:
 Keywords:  needs-patch   |     Focuses:  javascript, administration
--------------------------+-----------------------------------------

Comment (by Fab1en):

 I dug a little bit more into the JS code, and I found that the YouTube
 embedded player inside MediaElementJS is not playing because the
 MediaElementJS controls are not built. And MediaElementJS controls are not
 built, because `success` callback is not called.

 `success` callback is called here in MediaElementJS :

 {{{
 // when Flash/Silverlight is ready, it calls out to this method
 initPlugin: function (id) {

         var pluginMediaElement = this.pluginMediaElements[id],
                 htmlMediaElement = this.htmlMediaElements[id];

         if (pluginMediaElement) {
                 // find the javascript bridge
                 switch (pluginMediaElement.pluginType) {
                         case "flash":
                                 pluginMediaElement.pluginElement =
 pluginMediaElement.pluginApi = document.getElementById(id);
                                 break;
                         case "silverlight":
                                 pluginMediaElement.pluginElement =
 document.getElementById(pluginMediaElement.id);
                                 pluginMediaElement.pluginApi =
 pluginMediaElement.pluginElement.Content.MediaElementJS;
                                 break;
                 }

                 if (pluginMediaElement.pluginApi != null &&
 pluginMediaElement.success) {
                         pluginMediaElement.success(pluginMediaElement,
 htmlMediaElement);
                 }
         }
 },
 }}}

 The buggy part is here : `document.getElementById(id);` `document` is a
 global var that points to the main window document instead of the iframe
 one. That's why the `id` is not found and therefore the callback cannot be
 executed.

 If I replace
 {{{ document.getElementById(id); }}}
 by
 {{{ window.frames['content_ifr'].document.getElementById(id) }}}
 then the player works fine inside TinyMce

 Now I need to figure out how to do this properly.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/28190#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform