use nick field associated with the participants, but dont show them yet

app.js

@@ -81,7 +81,7 @@ function doJoin() {
             roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
         }
     } else {
-        roomjid += '/' + Strophe.getNodeFromJid(connection.jid);
+        roomjid += '/' + Strophe.getNodeFromJid(connection.jid).substr(0,8);
     }
     connection.emuc.doJoin(roomjid);
 }
@@ -246,6 +246,9 @@ $(document).bind('setLocalDescription.jingle', function (event, sid) {
 
 $(document).bind('joined.muc', function (event, jid, info) {
     updateRoomUrl(window.location.href);
+    document.getElementById('localNick').appendChild(
+        document.createTextNode(Strophe.getResourceFromJid(jid) + ' (you)')
+    );
 
     // Once we've joined the muc show the toolbar
     showToolbar();
@@ -264,6 +267,11 @@ $(document).bind('entered.muc', function (event, jid, info, pres) {
     var remotes = document.getElementById('remoteVideos');
     remotes.appendChild(container);
 
+    var nickfield = document.createElement('span');
+    nickfield.appendChild(document.createTextNode(Strophe.getResourceFromJid(jid)));
+    container.appendChild(nickfield);
+    resizeThumbnails();
+
     if (focus !== null) {
         // FIXME: this should prepare the video
         if (focus.confid === null) {
@@ -291,6 +299,7 @@ $(document).bind('left.muc', function (event, jid) {
     if (container) {
         // hide here, wait for video to close before removing
         $(container).hide(); 
+        resizeThumbnails();
     }
 
     if (Object.keys(connection.emuc.members).length === 0) {

css/main.css

@@ -29,6 +29,15 @@ html, body{
     width: 100%;
     height: 100%;
 }
+.videocontainer>span {
+    display: none; /* enable when you want nicks to be shown */
+    position: absolute;
+    left: 0px;
+    bottom: -20px;
+    z-index: 0;
+    width: 100%;
+    font-size: 10pt;
+}
 
 #largeVideo {
 }
@@ -49,11 +58,10 @@ html, body{
     width:auto;
     overflow: hidden;
     border:1px solid transparent;
-    font-size:0;
     z-index: 2;
 }
 
-#remoteVideos span {
+#remoteVideos>span {
     display: inline-block;
     z-index:0;
     border:1px solid #FFFFFF;

index.html

@@ -49,6 +49,7 @@
         <div class="fade_line"></div>
         <div id="remoteVideos">
             <span id="localVideoContainer" class="videocontainer">
+              <span id="localNick"></span>
               <video id="localVideo" autoplay oncontextmenu="return false;" muted/>
             </span>
         </div>