diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 8f188cca..d7a9a560 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -260,7 +260,7 @@ body {
     }
 
     .sidebar > div {
-        height: 15%;
+        max-height: 21%;
     }
 }
 @media (max-aspect-ratio: 1/1) {
@@ -278,7 +278,7 @@ body {
     }
 
     .sidebar > div {
-        width: 15%;
+        max-width: 21%;
     }
 }
 
@@ -342,6 +342,14 @@ body {
     margin: 2%;
 }
 
+/* Let's make sure videos are vertically centered if they need to be cropped */
+.media-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+}
+
 .chat-mode {
     display: flex;
     width: 100%;
diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts
index 7e99d496..98c20b4c 100644
--- a/front/src/WebRtc/LayoutManager.ts
+++ b/front/src/WebRtc/LayoutManager.ts
@@ -28,6 +28,7 @@ class LayoutManager {
         const div = document.createElement('div');
         div.innerHTML = html;
         div.id = "user-"+userId;
+        div.className = "media-container"
 
         if (importance === DivImportance.Important) {
             this.importantDivs.set(userId, div);