move video elements into container elements

app.js

@@ -96,12 +96,22 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
     }
     var sess = connection.jingle.sessions[sid];
     var vid = document.createElement('video');
+    console.log(sess);
+    var span = document.createElement('span');
+    // FIXME: how to name this span? sess.peerjid is not right for jingle clients
+    //console.log('peer: ', Strophe.getResourceFromJid(sess.peerjid));
+    //span.id = 'remoteVideocontainer_' + Strophe.getResourceFromJid(sess.peerjid);
+    span.className = 'videocontainer';
     var id = 'remoteVideo_' + sid + '_' + data.stream.id;
     vid.id = id;
     vid.autoplay = true;
     vid.oncontextmenu = function () { return false; };
     var remotes = document.getElementById('remoteVideos');
-    remotes.appendChild(vid);
+    span.appendChild(vid);
+    if (id.indexOf('mixedmslabel') != -1) {
+        $(span).hide();
+    }
+    remotes.appendChild(span);
     var sel = $('#' + id);
     sel.hide();
     RTC.attachMediaStream(sel, data.stream);
@@ -109,12 +119,12 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
     data.stream.onended = function () {
         console.log('stream ended', this.id);
         var src = $('#' + id).attr('src');
-        $('#' + id).remove();
+        $('#' + id).parent().remove();
         if (src === $('#largeVideo').attr('src')) {
             // this is currently displayed as large
             // pick the last visible video in the row
             // if nobody else is left, this picks the local video
-            var pick = $('#remoteVideos :visible:last').get(0);
+            var pick = $('#remoteVideos>span:visible:last>video').get(0);
             // mute if localvideo
             document.getElementById('largeVideo').volume = pick.volume;
             document.getElementById('largeVideo').src = pick.src;
@@ -269,8 +279,8 @@ function resizeLarge() {
         availableWidth = Math.floor(availableHeight * aspectRatio);
     }
     if (availableWidth < 0 || availableHeight < 0) return;
-    $('#largeVideo').width(availableWidth);
-    $('#largeVideo').height(availableWidth / aspectRatio);
+    $('#largeVideo').parent().width(availableWidth);
+    $('#largeVideo').parent().height(availableWidth / aspectRatio);
     resizeThumbnails();
 }
 
@@ -279,7 +289,7 @@ function resizeThumbnails() {
     // minus 4px for the delimiter lines on the top and bottom of the large video,
     // minus the 36px space inside the remoteVideos container used for highlighting shadow.
     var availableHeight = window.innerHeight - $('#largeVideo').height() - 79;
-    var numvids = $('#remoteVideos>video:visible').length;
+    var numvids = $('#remoteVideos>span:visible').length;
     // Remove the 1px borders arround videos.
     var availableWinWidth = $('#remoteVideos').width() - 2 * numvids;
     var availableWidth = availableWinWidth / numvids;
@@ -290,9 +300,9 @@ function resizeThumbnails() {
         availableWidth = Math.floor(availableHeight * aspectRatio);
     }
     // size videos so that while keeping AR and max height, we have a nice fit
-    $('#remoteVideos').height(availableHeight + 36); // add the 2*18px border used for highlighting shadow.
-    $('#remoteVideos>video:visible').width(availableWidth);
-    $('#remoteVideos>video:visible').height(availableHeight);
+    $('#remoteVideos').height(availableHeight+26); // add the 2*18px-padding-top border used for highlighting shadow.
+    $('#remoteVideos>span').width(availableWidth);
+    $('#remoteVideos>span').height(availableHeight);
 }
 
 $(document).ready(function () {

css/main.css

@@ -16,14 +16,21 @@ html, body{
     float: left;
 }
 
-#largeVideo {
-    display:block;
-    position:relative;
-    width:1280px;
-    height:720px;
-    margin-left:auto;
-    margin-right:auto;
+.videocontainer {
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+}
+.videocontainer>video {
+    position: absolute;
+    left: 0px;
+    top: 0px;
     z-index: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#largeVideo {
 }
 
 #remoteVideos {
@@ -31,6 +38,7 @@ html, body{
     position:relative;
     text-align:center;
     height:196px;
+    padding-top:10px;
     width:auto;
     overflow: hidden;
     border:1px solid transparent;
@@ -38,16 +46,16 @@ html, body{
     z-index: 2;
 }
 
+#remoteVideos span {
+    display: inline-block;
+}
+
 #remoteVideos video {
-    position:relative;
-    top:18px;
-    height:160px;
-    width:auto;
     z-index:0;
     border:1px solid #FFFFFF;
 }
 
-#remoteVideos video:hover {
+#remoteVideos>span:hover {
     cursor: pointer;
     cursor: hand;
     transform:scale(1.08, 1.08);

index.html

@@ -43,10 +43,14 @@
 
     <div id="videospace">
         <div class="fade_line"></div>
+        <div class="videocontainer">
           <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
+        </div>
         <div class="fade_line"></div>
         <div id="remoteVideos">
+            <span id="localVideoContainer" class="videocontainer">
               <video id="localVideo" autoplay oncontextmenu="return false;" muted/>
+            </span>
         </div>
     </div>
     <div id="chatspace">