需要帮助以随着屏幕尺寸的变化调整iframe的大小

Question

我正在创建一个被圆形图形包围的地球。地球是通过使用iframe创建的。我创建了一个图，并将其放入潜水中，并设法将地球覆盖在上面。在桌面上看起来不错，但是当我在手机或平板电脑上打开它时，后面的图形大小会随着屏幕的减小而减小，但地球的大小保持不变。

实时网址：https://netzero.co.in/calculator/

我希望地球适应屏幕尺寸，即使其始终显示在圆形图中。

代码：

<style> 
.main_content {
  width: auto;
  height: auto;
  position: relative;
}
.earth2{
    border-radius:50%;
}
.overlay-effect {
  position: absolute; 
  width: 100%;
  height: 100%;
  border-radius:50%;
  clip-path: circle(160px at center);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.earth {
  width:400px;
  height:400px;
  border-radius:50%;
  left: 50%;
  top:50%;
  margin-left: -200px;
  margin-top: -200px;
  padding: 0px;
  position: absolute;
  clip-path: circle(160px at center);
}
</style>

<div class="main_content">
    <div class="graph" id="canvas-holder" style="width:100%">
    <canvas id="chart-area" width="500" height="500"></canvas>
    </div>

<div class="earth">
    <iframe class="earth2" src="https://solarsystem.nasa.gov/gltf_embed/2393" width="400px" height="400px" frameborder="0" >
    </iframe>
</div>
<div style="opacity:0%;background-color: rgba(255,0,0,0.5);" class="overlay-effect" id="red-overlay">
    hi
</div>