Fixes video thumbnail border and large video background color

css/_filmstrip.scss

             display: none;
             position: relative;
             background-size: contain;
-            border: $thumbnailVideoBorder solid $thumbnailBorderColor;
+            border: $thumbnailVideoBorder solid transparent;
             border-radius: $borderRadius;
             margin: 0 $thumbnailVideoMargin;
 

css/themes/_light.scss

 // Toolbar
 $splitterColor: #ccc;
 
-// Thumbnail
-$thumbnailBorderColor: rgba(71, 71, 71, .7);
-
 /**
  * Forms
  */

modules/UI/videolayout/VideoContainer.js

         this.$video.css({
             transform: flipX ? 'scaleX(-1)' : 'none'
         });
+
+        // Reset the large video background depending on the stream.
+        this.setLargeVideoBackground(this.avatarDisplayed);
     }
 
     /**
         // default background set.
         // In order to fix this code we need to introduce video background or
         // find a workaround for the video flickering.
-        $("#largeVideoContainer").css("background",
-            (show) ? interfaceConfig.DEFAULT_BACKGROUND : "#000");
+        this.setLargeVideoBackground(show);
 
         this.$avatar.css("visibility", show ? "visible" : "hidden");
         this.avatarDisplayed = show;
     stayOnStage () {
         return false;
     }
+
+    /**
+     * Sets the large video container background depending on the container
+     * type and the parameter indicating if an avatar is currently shown on
+     * large.
+     *
+     * @param {boolean} isAvatar - Indicates if the avatar is currently shown
+     * on the large video.
+     * @returns {void}
+     */
+    setLargeVideoBackground (isAvatar) {
+        $("#largeVideoContainer").css("background",
+            (this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar)
+                ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
+    }
 }