Changeset 30082

Timestamp:

10/29/2014 12:46:15 AM (10 years ago)

Author:

wonderboymusic

Message:

Don't hardcode height for videos - this was a workaround for MediaElement internals causing problems. Responsive videos now work properly and don't cause extra whitespace.

Fixes MediaElement by hand in the interim: ​https://github.com/johndyer/mediaelement/pull/1337
Video playlists were completely broken by this.

Fixes #30078.

Location:

trunk/src/wp-includes

Files:

• js/mediaelement/mediaelement-and-player.min.js (modified) (1 diff)
• js/mediaelement/wp-mediaelement.css (modified) (1 diff)
• media.php (modified) (1 diff)

trunk/src/wp-includes/js/mediaelement/mediaelement-and-player.min.js

@@ -103 +103 @@
 "string"?window[c.options.success](c.media,c.domNode,c):c.options.success(c.media,c.domNode,c)}},handleError:function(a){this.controls.hide();this.options.error&&this.options.error(a)},setPlayerSize:function(a,b){if(!this.options.setDimensions)return false;if(typeof a!="undefined")this.width=a;if(typeof b!="undefined")this.height=b;if(this.height.toString().indexOf("%")>0||this.$node.css("max-width")==="100%"||this.$node[0].currentStyle&&this.$node[0].currentStyle.maxWidth==="100%"){var c=this.isVideo?
 this.media.videoWidth&&this.media.videoWidth>0?this.media.videoWidth:this.media.getAttribute("width")!==null?this.media.getAttribute("width"):this.options.defaultVideoWidth:this.options.defaultAudioWidth,e=this.isVideo?this.media.videoHeight&&this.media.videoHeight>0?this.media.videoHeight:this.media.getAttribute("height")!==null?this.media.getAttribute("height"):this.options.defaultVideoHeight:this.options.defaultAudioHeight,d=this.container.parent().closest(":visible").width(),g=this.container.parent().closest(":visible").height();
-c=this.isVideo||!this.options.autosizeProgress?parseInt(d*e/c,10):e;if(isNaN(c)||g!=0&&c>g)c=g;if(this.container.parent()[0].tagName.toLowerCase()==="body"){d=f(window).width();c=f(window).height()}if(c!=0&&d!=0){this.container.width(d).height(c);this.$media.add(this.container.find(".mejs-shim")).width("100%").height("100%");this.isVideo&&this.media.setVideoSize&&this.media.setVideoSize(d,c);this.layers.children(".mejs-layer").width("100%").height("100%")}}else{this.container.width(this.width).height(this.height);
+c=this.isVideo||!this.options.autosizeProgress?parseInt(d*e/c,10):e;if(isNaN(c))c=g;if(this.container.parent()[0].tagName.toLowerCase()==="body"){d=f(window).width();c=f(window).height()}if(c!=0&&d!=0){this.container.width(d).height(c);this.$media.add(this.container.find(".mejs-shim")).width("100%").height("100%");this.isVideo&&this.media.setVideoSize&&this.media.setVideoSize(d,c);this.layers.children(".mejs-layer").width("100%").height("100%")}}else{this.container.width(this.width).height(this.height);
 this.layers.children(".mejs-layer").width(this.width).height(this.height)}d=this.layers.find(".mejs-overlay-play");g=d.find(".mejs-overlay-button");d.height(this.container.height()-this.controls.height());g.css("margin-top","-"+(g.height()/2-this.controls.height()/2).toString()+"px")},setControlsSize:function(){var a=0,b=0,c=this.controls.find(".mejs-time-rail"),e=this.controls.find(".mejs-time-total");this.controls.find(".mejs-time-current");this.controls.find(".mejs-time-loaded");var d=c.siblings(),
 g=d.last(),k=null;if(!(!this.container.is(":visible")||!c.length||!c.is(":visible"))){if(this.options&&!this.options.autosizeProgress)b=parseInt(c.css("width"));if(b===0||!b){d.each(function(){var j=f(this);if(j.css("position")!="absolute"&&j.is(":visible"))a+=f(this).outerWidth(true)});b=this.controls.width()-a-(c.outerWidth(true)-c.width())}do{c.width(b);e.width(b-(e.outerWidth(true)-e.width()));if(g.css("position")!="absolute"){k=g.position();b--}}while(k!=null&&k.top>0&&b>0);this.setProgressRail&&

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

@@ -96 +96 @@
     max-width: 100%;
     height: auto;
+}
+
+.wp_attachment_holder .wp-video {
+    margin-top: 18px;
 }
 

trunk/src/wp-includes/media.php

@@ -1856 +1856 @@
     $html .= '</video>';
 
-    $width_rule = $height_rule = '';
+    $width_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="%s%s" class="wp-video">%s</div>', $width_rule, $height_rule, $html );
+    $output = sprintf( '<div style="%s" class="wp-video">%s</div>', $width_rule, $html );
 
     /**