Fixed video sizing when there were less videos than possible slots in a row.

src/styles/components/_webrtc.scss

@@ -67,8 +67,8 @@ transform: rotateY(180deg);
 }
 #mini {
 position: absolute;
-height: 20%;
-bottom: 4px;
+max-height: 18%;
+bottom: 2px;
 right: 2px;
 transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
@@ -86,6 +86,7 @@ transition-property: opacity;
 -webkit-transition-property: opacity;
 transition-duration: 2s;
 -webkit-transition-duration: 2s;
+background: rgba(0,0,0,0.4);
 /*background: red;*/
 }
 #remoteVideos {
@@ -106,7 +107,8 @@ width:100%;
 height:100%;
 }
 #miniVideo {
-height: 100%;
+max-height: 100%;
+max-width:100%;
 }
 .remoteVideo {
 display: inline-block;
@@ -115,6 +117,7 @@ height:100%;
 vertical-align:bottom;
 position:relative;
 visibility:hidden;
+background: rgba(0,0,0,0.4);
 }
 .remoteVideo.withvideo {
 visibility:visible;

static/js/directives/audiovideo.js

@@ -300,7 +300,10 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                         var space = innerHeight*innerWidth; // square pixels
                         var videoSpace = space/videos.length;
                         var singleVideoWidthOptimal = Math.pow(videoSpace * aspectRatio, 0.5);
-                        var videosPerRow = Math.ceil(innerWidth/singleVideoWidthOptimal)
+                        var videosPerRow = Math.ceil(innerWidth/singleVideoWidthOptimal);
+                        if (videosPerRow > videos.length) {
+                            videosPerRow = videos.length;
+                        }
                         var singleVideoWidth = Math.ceil(innerWidth/videosPerRow);
                         var singleVideoHeight = Math.ceil(singleVideoWidth/aspectRatio);
                         var newContainerWidth = (videosPerRow*singleVideoWidth);