MediaElement upgrade: cleanup for generated markup for videos.

See #29110.

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


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

wp-includes/media-template.php

@@ -50,7 +50,8 @@ function wp_underscore_audio_template() {
 function wp_underscore_video_template() {
 	$video_types = wp_get_video_extensions();
 ?>
-<#  var w, h, settings = wp.media.view.settings,
+<#  var w_rule = '', h_rule = '',
+		w, h, settings = wp.media.view.settings,
 		isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
 
 	if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
@@ -64,12 +65,20 @@ function wp_underscore_video_template() {
 	} else {
 		h = data.model.height;
 	}
+
+	if ( w ) {
+		w_rule = ' width: ' + w + 'px;';
+	}
+
+	if ( h ) {
+		h_rule = ' height: ' + h + 'px;';
+	}
 #>
-<div style="max-width: 100%; width: {{ w }}px">
+<div style="max-width: 100%;{{ w_rule }}{{ h_rule }}">
 <video controls
 	class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
-	width="{{ w }}"
+	<# if ( w ) { #>width="{{ w }}"<# } #>
-	height="{{ h }}"
+	<# if ( h ) { #>height="{{ h }}"<# } #>
 	<?php
 	$props = array( 'poster' => '', 'preload' => 'metadata' );
 	foreach ( $props as $key => $value ):
@@ -280,10 +289,21 @@ function wp_print_media_templates() {
 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
 					</audio>
 				</div>
-				<# } else if ( 'video' === data.type ) { #>
+				<# } else if ( 'video' === data.type ) {
-				<div style="max-width: 100%; width: {{ data.width }}px" class="wp-media-wrapper">
+					var w_rule = h_rule = '';
+					if ( data.width ) {
+						w_rule = ' width: ' + data.width + 'px;';
+					} else if ( wp.media.view.settings.contentWidth ) {
+						w_rule = ' width: ' + wp.media.view.settings.contentWidth + 'px;';
+					}
+					if ( data.height ) {
+						h_rule = ' height: ' + data.height + 'px;';
+					}
+				#>
+				<div style="max-width: 100%; {{ w_rule }}{{ h_rule }}" class="wp-media-wrapper">
 					<video controls class="wp-video-shortcode" preload="metadata"
-						width="{{ data.width }}" height="{{ data.height }}"
+						<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
+						<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
 						<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
 					</video>

wp-includes/media.php

@@ -1874,7 +1874,14 @@ function wp_video_shortcode( $attr, $content = '' ) {
 	}
 	$html .= '</video>';
 
-	$output = sprintf( '<div style="width: %dpx; max-width: 100%%;" class="wp-video">%s</div>', $atts['width'], $html );
+	$width_rule = $height_rule = '';
+	if ( ! empty( $atts['width'] ) ) {
+		$width_rule = sprintf( ' width: %dpx;', $atts['width'] );
+	}
+	if ( ! empty( $atts['height'] ) ) {
+		$height_rule = sprintf( ' height: %dpx;', $atts['height'] );
+	}
+	$output = sprintf( '<div style="max-width: 100%%;%s%s" class="wp-video">%s</div>', $width_rule, $height_rule, $html );
 
 	/**
 	 * Filter the output of the video shortcode.

wp-includes/post-template.php

@@ -1520,6 +1520,9 @@ function prepend_attachment($content) {
 			$atts['width'] = (int) $meta['width'];
 			$atts['height'] = (int) $meta['height'];
 		}
+		if ( has_post_thumbnail() ) {
+			$atts['poster'] = wp_get_attachment_url( get_post_thumbnail_id() );
+		}
 		$p = wp_video_shortcode( $atts );
 	} elseif ( 0 === strpos( $post->post_mime_type, 'audio' ) ) {
 		$p = wp_audio_shortcode( array( 'src' => wp_get_attachment_url() ) );