#iframe responsive according pc resolution

const iframe = document.querySelector("iframe"); if (iframe) { iframe.src = `http://i will take here to live streming show on pages`; // resizeCanvas(); // await showPreviousROIs(); } .middle { height: 83vh; background-color: black; padding-left: 15%; padding-right: 2vw; gap: 1vw; display: flex; justify-content: center; align-items: center; font-size: 1em; border-bottom: 0.1vh solid black; overflow: hidden; } .middle_container { height: 95%; max_height: 83vh; background-color: black; width: 60vw; max-width: 60vw; display: flex; justify-content: space-between; align-items: center; font-size: 1em; overflow: hidden; flex-shrink: 0; flex-grow: 0; } .stream-frame { position: relative; width: 100%; max-width: 100vw; aspect-ratio: 4 / 3; background-color: transparent; overflow: hidden; } /* .stream-frame { position: relative; width: 100%; height: 100%; max-width: 100vw; background-color: red; overflow: hidden; } */ /* Stream + canvas always fill frame */ streamIframe, #roiCanvas { position: a