diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 1ce2a2f13..5947afe91 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -87,7 +87,6 @@
 
     &__toolbar {
         bottom: 0;
-        height: $thumbnailToolbarHeight;
         padding: 0 5px 0 5px;
     }
 
@@ -195,6 +194,13 @@
         background-color: rgba(0,0,0,.4);
         padding: 3px 7px;
         border-radius: 3px;
+        max-width: calc(100% - 32px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        height: 16px;
+        display: inline-block;
+        text-align: right;
     }
 
     @media (min-width: 581px) {
@@ -288,21 +294,8 @@
 #alwaysOnTop .displayname,
 .videocontainer .displayname,
 .videocontainer .editdisplayname {
-    display: inline-block;
-    position: absolute;
-    left: 10%;
-    width: 80%;
-    top: 50%;
-    @include transform(translateY(-40%));
-    color: $participantNameColor;
-    text-align: center;
-    text-overflow: ellipsis;
-    font-size: 12px;
     font-weight: 100;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: $thumbnailToolbarHeight;
-    z-index: $zindex2;
+    color: $participantNameColor;
 }
 
 #alwaysOnTop .displayname {
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 0f75380a3..3c9a21926 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -812,21 +812,20 @@ class Thumbnail extends Component<Props, State> {
                 </span>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
+                    <div
+                        className = 'videocontainer__participant-name'
+                        onClick = { onClick }>
+                        <DisplayName
+                            allowEditing = { _allowEditing }
+                            displayNameSuffix = { _defaultLocalDisplayName }
+                            elementID = 'localDisplayName'
+                            participantID = { id } />
+                    </div>
                 </div>
                 <div className = 'videocontainer__toptoolbar'>
                     { this._renderTopIndicators() }
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
-                <div
-                    className = 'displayNameContainer'
-                    onClick = { onClick }>
-                    <DisplayName
-                        allowEditing = { _allowEditing }
-                        displayNameSuffix = { _defaultLocalDisplayName }
-                        elementID = 'localDisplayName'
-                        participantID = { id } />
-                </div>
                 { this._renderAvatar(styles.avatar) }
                 <span className = 'audioindicator-container'>
                     <AudioLevelIndicator audioLevel = { audioLevel } />
@@ -960,14 +959,13 @@ class Thumbnail extends Component<Props, State> {
                 </div>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
+                    <div className = 'videocontainer__participant-name'>
+                        <DisplayName
+                            elementID = { `participant_${id}_name` }
+                            participantID = { id } />
+                    </div>
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        elementID = { `participant_${id}_name` }
-                        participantID = { id } />
-                </div>
                 { this._renderAvatar(styles.avatar) }
                 <div className = 'presence-label-container'>
                     <PresenceLabel