diff --git a/src/js/media/views/attachment/details-two-column.js b/src/js/media/views/attachment/details-two-column.js
index 7d0b441040..f02de03c0f 100644
--- a/src/js/media/views/attachment/details-two-column.js
+++ b/src/js/media/views/attachment/details-two-column.js
@@ -35,17 +35,8 @@ TwoColumn = Details.extend(/** @lends wp.media.view.Attachment.Details.TowColumn
 	/**
 	 * Noop this from parent class, doesn't apply here.
 	 */
-	toggleSelectionHandler: function() {},
+	toggleSelectionHandler: function() {}
 
-	render: function() {
-		Details.prototype.render.apply( this, arguments );
-
-		wp.media.mixin.removeAllPlayers();
-		this.$( 'audio, video' ).each( function (i, elem) {
-			var el = wp.media.view.MediaDetails.prepareSrc( elem );
-			new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
-		} );
-	}
 });
 
 module.exports = TwoColumn;
diff --git a/src/js/media/views/attachment/details.js b/src/js/media/views/attachment/details.js
index 877eac6371..5891fdf049 100644
--- a/src/js/media/views/attachment/details.js
+++ b/src/js/media/views/attachment/details.js
@@ -198,6 +198,7 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
 			this.moveFocus();
 		}
 	},
+
 	/**
 	 * Untrashes an attachment.
 	 *
@@ -257,6 +258,16 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
 			this.controller.trigger( 'attachment:details:shift-tab', event );
 			return false;
 		}
+	},
+
+	render: function() {
+		Attachment.prototype.render.apply( this, arguments );
+
+		wp.media.mixin.removeAllPlayers();
+		this.$( 'audio, video' ).each( function (i, elem) {
+			var el = wp.media.view.MediaDetails.prepareSrc( elem );
+			new window.MediaElementPlayer( el, wp.media.mixin.mejsSettings );
+		} );
 	}
 });
 
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 0303d86dc9..f07617cf86 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -1765,6 +1765,14 @@
 	padding-bottom: 11px;
 }
 
+.attachment-info .wp-media-wrapper {
+	margin-bottom: 8px;
+}
+
+.attachment-info .wp-media-wrapper.wp-audio {
+	margin-top: 13px;
+}
+
 .attachment-info .filename {
 	font-weight: 600;
 	color: #444;
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 47204f31b7..c14b7f4793 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -366,7 +366,7 @@ function wp_print_media_templates() {
 				<# } #>
 
 				<# if ( 'audio' === data.type ) { #>
-				<div class="wp-media-wrapper">
+				<div class="wp-media-wrapper wp-audio">
 					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
 					</audio>
@@ -595,15 +595,41 @@ function wp_print_media_templates() {
 			</span>
 		</h2>
 		<div class="attachment-info">
-			<div class="thumbnail thumbnail-{{ data.type }}">
-				<# if ( data.uploading ) { #>
-					<div class="media-progress-bar"><div></div></div>
-				<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
-					<img src="{{ data.size.url }}" draggable="false" alt="" />
-				<# } else { #>
-					<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
-				<# } #>
-			</div>
+
+			<# if ( 'audio' === data.type ) { #>
+				<div class="wp-media-wrapper wp-audio">
+					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+						<source type="{{ data.mime }}" src="{{ data.url }}"/>
+					</audio>
+				</div>
+			<# } else if ( 'video' === data.type ) {
+				var w_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;';
+				}
+			#>
+				<div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
+					<video controls="controls" class="wp-video-shortcode" preload="metadata"
+						<# 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>
+				</div>
+			<# } else { #>
+				<div class="thumbnail thumbnail-{{ data.type }}">
+					<# if ( data.uploading ) { #>
+						<div class="media-progress-bar"><div></div></div>
+					<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
+						<img src="{{ data.size.url }}" draggable="false" alt="" />
+					<# } else { #>
+						<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
+					<# } #>
+				</div>
+			<# } #>
+
 			<div class="details">
 				<div class="filename">{{ data.filename }}</div>
 				<div class="uploaded">{{ data.dateFormatted }}</div>