Handling Video Quality of the App Inside Iframe

In the Video section of the control panel, we can see two options for Resolution:

i) Dynamic

ii) Custom

Dynamic resolution helps you set the app resolution dynamically. This means it will automatically adjust the app's resolution according to the height and width of the iframe element. This helps the app adjust to various display sizes for different devices.

While useful, Dynamic resolution has a drawback regarding the quality of the video in mobile devices. This happens because Dynamic resolution takes the height and width of the webpage and sets the resolution of the video. Since mobile devices have smaller displays than computers, the resolution of the video will be too low and thus the video quality will be lower.

There are a couple of ways to fix this:

1. We can select Custom resolution from the control panel and set high enough values so that the video quality is always the same.

   

2. We can set the resolution we want from the front end with the following code:

   let obj = {
   			cmd: "freezeResolutionAt",
   			x: 1920,
   			y: 1080
   	}
   	document.getElementById("iframe_1").contentWindow.postMessage(JSON.stringify(obj), "*");