You can't change size in a ResizeObserver. So do what we do in montage, just add the affected element to an array and deal with it in an interval

web/skins/classic/views/js/watch.js

@@ -10,6 +10,7 @@ var filterQuery = '&filter[Query][terms][0][attr]=MonitorId&filter[Query][terms]
 var idle = 0;
 var monitorStream = false; /* Stream is not started */
 var currentMonitor;
+var changedMonitors = [];
 
 var classSidebarL = 'col-sm-3'; /* id="sidebar" */
 var classSidebarR = 'col-sm-2'; /* id="ptzControls" */
@@ -1063,8 +1064,12 @@ function initPage() {
 
   // Creating a ResizeObserver Instance
   observer = new ResizeObserver((objResizes) => {
+    // We can't do the actual resizing in the Observer, it causes a loop. Need to just set a flag and do it in an interval.
     objResizes.forEach((obj) => {
-      monitorsSetScale(monitorId);
+      const id = stringToNumber(obj.target.id);
+      if (!changedMonitors.includes(id)) {
+        changedMonitors.push(id);
+      }
     });
   });
 
@@ -1073,6 +1078,16 @@ function initPage() {
     observer.observe(this);
   });
 
+  setInterval(() => { //Updating GridStack resizeToContent, Scale & Ratio
+    if (changedMonitors.length > 0) {
+      changedMonitors.slice().reverse().forEach(function(item, index, object) {
+        const img = document.getElementById('liveStream'+item);
+        changedMonitors.splice(object.length - 1 - index, 1);
+        monitorsSetScale(item);
+      });
+    }
+  }, 100);
+
   // Event listener for double click
   //var elStream = document.querySelectorAll('[id ^= "liveStream"], [id ^= "evtStream"]');
   var elStream = document.querySelectorAll('[id = "wrapperMonitor"]');