Fixed mini video sizing in Firefox by implementing object-fit shim.

Updated Modernizr to latest version with object-fit detection.

src/styles/components/_audiovideo.scss

@@ -97,6 +97,9 @@
     transform: scale(-1, 1);
     z-index: 2;
   }
+  video {
+    object-fit: contain;
+  }
 }
 
 .audiovideo {

static/js/services/videolayout.js

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(["jquery", "underscore"], function($, _) {
+define(["jquery", "underscore", "modernizr"], function($, _, Modernizr) {
 
     var dynamicCSSContainer = "audiovideo-dynamic";
     var renderers = {};
@@ -39,6 +39,8 @@ define(["jquery", "underscore"], function($, _) {
         return size;
     }
 
+    var objectFitSupport = Modernizr["object-fit"] && true;
+
     // videoLayout
     return ["$window", function($window) {
 
@@ -92,6 +94,17 @@ define(["jquery", "underscore"], function($, _) {
             //console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth);
             var extraCSS = {};
 
+            if (!objectFitSupport) {
+                // Make mini video fit into available space on browsers with no object-fit support.
+                // http://caniuse.com/object-fit
+                var aspectRatioLocal = scope.localVideo.videoWidth/scope.localVideo.videoHeight;
+                extraCSS = {
+                    ".renderer-onepeople .miniVideo": {
+                        width: ($(scope.mini).height()*aspectRatioLocal)+"px"
+                    }
+                };
+            }
+
             if (videos.length === 1) {
                 var newVideoWidth = innerWidth < aspectRatio * innerHeight ? innerWidth : aspectRatio * innerHeight;
                 var newVideoHeight = innerHeight < innerWidth / aspectRatio ? innerHeight : innerWidth / aspectRatio;
@@ -124,14 +137,14 @@ define(["jquery", "underscore"], function($, _) {
                 */
                 container.style.width = newContainerWidth + "px";
                 container.style.left = ((innerWidth - newContainerWidth) / 2) + 'px';
-                extraCSS = {
+                extraCSS = $.extend(extraCSS, {
                     ".renderer-onepeople .remoteVideos": {
                         ">div": {
                             width: singleVideoWidth+"px",
                             height: singleVideoHeight+"px"
                         }
                     }
-                };
+                });
             }
             $.injectCSS(extraCSS, {
                 truncateFirst: true,