I'm displaying an Vimeo video iFrame in a flexbox container. I'm setting the size of the iFrame with JS. The issue is that the page loads twice, first I guess with standard settings then with the ones I set with JS.

How can I prevent the double loading?

I give you a JSFiddle because the effect is not seen in a StackSnippet due to cookie sandboxing

JSFiddle

HTML

<div class="dc-video-row">
  <div class="dc-video-content">
    <iframe 
            src='https://player.vimeo.com/video/436703027' 
            frameborder='0' 
            webkitAllowFullScreen mozallowfullscreen allowFullScreen>         
    </iframe>
  </div>
  <div class="dc-text-content">
    text
  </div>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

CSS

.dc-video-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.dc-text-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: yellow;
  width: 100%;
}

.dc-text-content > * {
  margin-left: 2rem;
  margin-right: 2rem;
}

.dc-text-content > p {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
}

JS

const iframe = document.querySelector('iframe');
const player = new Vimeo.Player(iframe);

Promise.all([player.getVideoWidth(), player.getVideoHeight()]).then(function(dimensions) {

  let aspectRatio = dimensions[1]/dimensions[0];
  
  const videoBox = document.querySelector(".dc-video-content");
  const newVideoWidth = document.querySelector(".dc-video-row").offsetWidth/3
  videoBox.style.width =  newVideoWidth + "px";
  videoBox.style.height = newVideoWidth * aspectRatio + "px";

  iframe.width = newVideoWidth
  iframe.height = newVideoWidth * aspectRatio;
});