diff --git a/app/assets/javascripts/thyme/resizer.js b/app/assets/javascripts/thyme/resizer.js
index 420c4cb1c..7c51e3291 100644
--- a/app/assets/javascripts/thyme/resizer.js
+++ b/app/assets/javascripts/thyme/resizer.js
@@ -4,20 +4,26 @@
 // eslint-disable-next-line no-unused-vars
 const Resizer = {
   resizeContainer: function (container, factor, offset) {
+    // see https://stackoverflow.com/a/73425736/
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
     const video = document.getElementById("video");
     const $container = $(container);
 
-    let height = $(window).height();
+    let height = windowHeight;
     const vWidth = video.videoWidth;
     const vHeight = video.videoHeight;
-    let width = Math.floor((vWidth * $(window).height() / vHeight) * factor) - offset;
-    if (width > $(window).width()) {
-      const shrink = $(window).width() / width;
+    let width = Math.floor((vWidth * windowHeight / vHeight) * factor) - offset;
+    if (width > windowWidth) {
+      const shrink = windowWidth / width;
       height = Math.floor(height * shrink);
-      width = $(window).width();
+      width = windowWidth;
     }
-    const top = Math.floor(0.5 * ($(window).height() - height));
-    const left = Math.floor(0.5 * ($(window).width() - width));
+
+    const top = Math.floor(0.5 * (windowHeight - height));
+    const left = Math.floor(0.5 * (windowWidth - width));
+
     $container.css("height", height + "px");
     $container.css("width", width + "px");
     $container.css("top", top + "px");