Ticket #40750: 40750.0.diff

src/wp-admin/js/widgets/media-video-widget.js

@@ -180 +180 @@
                                 is_hosted_embed: isHostedEmbed,
                                 error: error
                         } ) );
+                        wp.mediaelement.initialize();
                 },
 
                 /**

src/wp-admin/js/widgets/media-widgets.js

@@ -1000 +1000 @@
          * @returns {void}
          */
         component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
-                var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId;
+                var widgetContent, controlContainer, widgetForm, idBase, ControlConstructor, ModelConstructor, modelAttributes, widgetControl, widgetModel, widgetId, widgetInside, animatedCheckDelay = 50, renderWhenAnimationDone;
                 widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
                 widgetContent = widgetForm.find( '> .widget-content' );
                 idBase = widgetForm.find( '> .id_base' ).val();
@@ -1050 +1050 @@
                         el: controlContainer,
                         model: widgetModel
                 });
-                widgetControl.render();
+
+                /*
+                 * Render the widget once the widget parent's container finishes animating,
+                 * as the widget-added event fires with a slideDown of the container.
+                 * This ensures that the container's dimensions are fixed so that ME.js
+                 * can initialize with the proper dimensions.
+                 */
+                widgetInside = widgetContainer.parent();
+                renderWhenAnimationDone = function() {
+                        if ( widgetInside.is( ':animated' ) ) {
+                                setTimeout( renderWhenAnimationDone, animatedCheckDelay );
+                        } else {
+                                widgetControl.render();
+                        }
+                };
 
                 /*
                  * Note that the model and control currently won't ever get garbage-collected