Prevent a "" element from being mounted on another "" element - CLS web vital

Question

I have a problem with the jumps that are made in the page at the time of loading, despite the fact that each element has a fixed height, the <section> is mounted on the upper element with a fixed height

html:

    <seccion id="st-envivo" class="bloque-en-vivo oscuro">
  <div class="senal_live">
    <div class="nativo_ad-derecha">
      <img src="https://html.canalrcn.com/CanalRCN/react/rediseno-nl/2022/senal-en-vivo/banner/400x711_DER.jpg" class="w-100 lazy-loading" alt="">
    </div>
    <div class="embed_live">
      <div class="player-embed" id="play-envivo">
        <!-- VIDEO -->
      </div>
    </div>
    <div class="nativo_ad-izquierda">

      <img src="https://html.canalrcn.com/CanalRCN/react/rediseno-nl/2022/senal-en-vivo/banner/400x711_IZQ.jpg" class="w-100 lazy-loading" alt="">
    </div>
  </div>

</seccion>

CSS:

.senal-canal-rcn .bloque-en-vivo { height: 252px; min-height: 252px; position: relative; display: block; background: blue; }

#play-envivo { height: 252px; display: block; position: relative; background: red; } 

.presentamos { height: 110px; } 

.live.ult_capitulos { min-height: 330px; } 

.container-fluid.mt-5.md-5.carousel-cap { min-height: 220px; }

Image at page load: image at page load

Web page:(https://www.canalrcn.com/senal-en-vivo//)