diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index e23107ff86..2134b9deb6 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3557,8 +3557,8 @@ button.module-image__border-overlay:focus {
 }
 .module-ongoing-call {
   &__remote-video-enabled {
-    max-width: 100%;
-    max-height: 100%;
+    height: 100%;
+    width: 100%;
     position: relative;
     &--reconnecting {
       filter: blur(15px);
diff --git a/ts/calling/VideoSupport.preload.ts b/ts/calling/VideoSupport.preload.ts
index 4a9942ae98..cef7cd9b4c 100644
--- a/ts/calling/VideoSupport.preload.ts
+++ b/ts/calling/VideoSupport.preload.ts
@@ -514,43 +514,37 @@ export class CanvasVideoRenderer {
       width <= 2 ||
       height <= 2 ||
       width > MAX_VIDEO_CAPTURE_WIDTH ||
-      height > MAX_VIDEO_CAPTURE_HEIGHT ||
-      canvas.clientWidth <= 0 ||
-      canvas.clientHeight <= 0
+      height > MAX_VIDEO_CAPTURE_HEIGHT
     ) {
       return;
     }
 
-    const aspectRatio = width / height;
+    const frameAspectRatio = width / height;
+    const canvasAspectRatio = canvas.clientWidth / canvas.clientHeight;
 
-    const { parentElement } = canvas;
-    let parentAspectRatio = 1;
+    let dx = 0;
+    let dy = 0;
 
-    if (parentElement) {
-      parentAspectRatio =
-        parentElement.clientWidth / parentElement.clientHeight;
-    }
-
-    let style;
-    if (aspectRatio >= 1) {
-      // landscape
-      style = 'width: 100%';
+    if (frameAspectRatio > canvasAspectRatio) {
+      // Frame wider than view: We need bars at the top and bottom
+      canvas.width = width;
+      canvas.height = width / canvasAspectRatio;
+      dy = (canvas.height - height) / 2;
+    } else if (frameAspectRatio < canvasAspectRatio) {
+      // Frame narrower than view: We need pillars on the sides
+      canvas.width = height * canvasAspectRatio;
+      canvas.height = height;
+      dx = (canvas.width - width) / 2;
     } else {
-      // portrait
-      style = 'height: 100%';
-    }
-    // container is more landscape than video
-    if (aspectRatio > 1 && parentAspectRatio > aspectRatio) {
-      style = 'height: 100%';
-    }
-    // container is more portait than video
-    if (aspectRatio < 1 && parentAspectRatio < aspectRatio) {
-      style = 'width: 100%';
+      // Will stretch perfectly with no bars
+      canvas.width = width;
+      canvas.height = height;
     }
 
-    canvas.width = width;
-    canvas.height = height;
-    canvas.setAttribute('style', style);
+    if (dx > 0 || dy > 0) {
+      context.fillStyle = 'black';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
 
     const sizeChanged =
       this.imageData?.width !== width || this.imageData?.height !== height;
@@ -559,7 +553,7 @@ export class CanvasVideoRenderer {
       this.imageData = new ImageData(width, height);
     }
     this.imageData.data.set(this.buffer.subarray(0, width * height * 4));
-    context.putImageData(this.imageData, 0, 0);
+    context.putImageData(this.imageData, dx, dy);
 
     if (sizeChanged) {
       this.sizeCallback?.({ width, height });