Videos in the media modal:

* Support rendering of chromeless YouTube when a video shortcode's `src` is a YouTube URL. 
* Don't instantiate an instance of `MediaElementPlayer` until after the view has been attached to the DOM and the view's `ready` event has fired.
* Don't set `poster` for videos when its value is empty. Much like `src` in the `img` tag - when empty, it will assume and load the current window's URL.
* When removing a player instance, don't call the `pause` method if the playback is not native.

See #27016.



git-svn-id: https://develop.svn.wordpress.org/trunk@27452 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/media-views.js

@@ -6384,6 +6384,7 @@
 			_.bindAll(this, 'success', 'close');
 
 			this.listenTo( this.controller, 'close', this.close );
+			this.on( 'ready', this.setPlayer );
 
 			media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
 		},
@@ -6411,7 +6412,16 @@
 		},
 
 		setPlayer : function () {
-			this.player = false;
+			if ( ! this.player ) {
+				this.player = new MediaElementPlayer( this.media, this.settings );
+			}
+		},
+
+		/**
+		 * @abstract
+		 */
+		setMedia : function () {
+			return this;
 		},
 
 		/**
@@ -6449,8 +6459,11 @@
 
 		close : function() {
 			if ( this.player ) {
+				if ( _.isUndefined( this.mejs.pluginType ) ) {
 					this.mejs.pause();
+				}
 				this.remove();
+				this.player = false;
 			}
 		},
 
@@ -6478,9 +6491,9 @@
 			media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
 			setTimeout( function() { self.resetFocus(); }, 10 );
 
-			this.setPlayer( settings );
+			this.settings = settings;
 
-			return this;
+			return this.setMedia();
 		},
 
 		resetFocus: function() {
@@ -6503,12 +6516,11 @@
 		className: 'audio-details',
 		template:  media.template('audio-details'),
 
-		setPlayer: function( settings ) {
+		setMedia: function() {
 			var audio = this.$('.wp-audio-shortcode').get(0);
 
-			audio = this.prepareSrc( audio );
+			this.media = this.prepareSrc( audio );
 
-			this.player = new MediaElementPlayer( audio, settings );
 			return this;
 		}
 	});
@@ -6528,12 +6540,17 @@
 		className: 'video-details',
 		template:  media.template('video-details'),
 
-		setPlayer: function( settings ) {
+		setMedia: function() {
-			var video = this.$('.wp-video-shortcode').get(0);
+			var video = this.$('.wp-video-shortcode');
 
-			video = this.prepareSrc( video );
+			if ( ! video.hasClass('youtube-video') ) {
+				video = this.prepareSrc( video.get(0) );
+			} else {
+				video = video.get(0);
+			}
+
+			this.media = video;
 
-			this.player = new MediaElementPlayer( video, settings );
 			return this;
 		}
 	});

src/wp-includes/media-template.php

@@ -739,11 +739,41 @@ function wp_print_media_templates() {
 				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
 					h = ! data.model.height ? 360 : data.model.height;
 
-				if ( w !== data.model.width ) {
+				if ( data.model.width && w !== data.model.width ) {
 					h = Math.ceil( ( h * w ) / data.model.width );
 				}
 
-				if ( data.model.src ) { #>
+				if ( data.model.src ) {
+					if ( data.model.src.match(/youtube|youtu\.be/) ) {
+				#>
+					<video controls
+						class="wp-video-shortcode youtube-video"
+						width="{{{ w }}}"
+						height="{{{ h }}}"
+						<?php
+						$props = array( 'poster' => '', 'preload' => 'metadata' );
+						foreach ( $props as $key => $value ):
+							if ( empty( $value ) ) {
+							?><#
+							if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
+								#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
+							} #>
+							<?php } else {
+								echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
+							}
+						endforeach;
+						?><#
+						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
+						?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
+							#> <?php echo $attr ?><#
+						}
+						<?php endforeach ?>#>
+					>
+						<source type="video/youtube" src="{{{ data.model.src }}}" />
+					</video>
+				<#
+					} else {
+				#>
 					<video controls
 						class="wp-video-shortcode"
 						width="{{{ w }}}"
@@ -752,8 +782,15 @@ function wp_print_media_templates() {
 						<?php
 						$props = array( 'poster' => '', 'preload' => 'metadata' );
 						foreach ( $props as $key => $value ):
-							echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
+							if ( empty( $value ) ) {
-						<?php endforeach;
+							?><#
+							if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
+								#> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
+							} #>
+							<?php } else {
+								echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
+							}
+						endforeach;
 						?><#
 						<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
 						?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
@@ -761,12 +798,13 @@ function wp_print_media_templates() {
 						}
 						<?php endforeach ?>#>
 					/>
-					<# rendered = true; #>
 				<label class="setting">
 					<span>SRC</span>
 					<input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
 				</label>
-				<# } #>
+				<#	}
+					rendered = true;
+				} #>
 				<?php
 				$default_types = wp_get_video_extensions();