Load MediaElement's CSS when TinyMCE is loaded via `$mce_css` in `editor_settings()`. Add some baseline styles in `wp-content.css` for audio, video, and embed tags to ensure their `max-width` is `100%`, regardless of whether MEjs is implemented in TinyMCE.

See #27389.


Built from https://develop.svn.wordpress.org/trunk@27534


git-svn-id: http://core.svn.wordpress.org/trunk@27377 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-editor.php

@@ -343,9 +343,16 @@ final class _WP_Editors {
 				$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
 				$version = 'ver=' . $GLOBALS['wp_version'];
 				$dashicons = includes_url( "css/dashicons$suffix.css?$version" );
-
+				$mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
+				$wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
+				
 				// WordPress default stylesheet and dashicons
-				$mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
+				$mce_css = array(
+					$dashicons,
+					$mediaelement,
+					$wpmediaelement,
+					self::$baseurl . '/skins/wordpress/wp-content.css'
+				);
 
 				// load editor_style.css if the current theme supports it
 				if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

wp-includes/js/mediaelement/wp-mediaelement.css

@@ -1,5 +1,5 @@
 .mejs-container, .mejs-embed, .mejs-embed body {
-	background: #464646;
+	background: #000;
 }
 
 .mejs-controls .mejs-time-rail .mejs-time-loaded {

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -203,6 +203,13 @@ img::selection {
 	outline: 0;
 }
 
+audio,
+video,
+embed {
+	display: -moz-inline-stack;
+	display: inline-block;
+	max-width: 100%;
+}
 
 /**
  * WP Views