fix(video-thumbnail) Fixed name for remote participants

Display name on thumbnail for remote participants as well
Updated style

css/_videolayout_default.scss

@@ -190,6 +190,13 @@
         z-index: $zindex2;
     }
 
+    &__participant-name {
+        color: #fff;
+        background-color: rgba(0,0,0,.4);
+        padding: 3px 7px;
+        border-radius: 3px;
+    }
+
     @media (min-width: 581px) {
         &.shift-right {
             &#largeVideoContainer {

react/features/filmstrip/components/web/Thumbnail.js

@@ -812,7 +812,7 @@ class Thumbnail extends Component<Props, State> {
                 </span>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <div>{ _participant.name }</div>
+                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
                 </div>
                 <div className = 'videocontainer__toptoolbar'>
                     { this._renderTopIndicators() }
@@ -960,6 +960,7 @@ class Thumbnail extends Component<Props, State> {
                 </div>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
+                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
                 <div className = 'displayNameContainer'>