Estoy mostrando un iFrame de video de Vimeo en un contenedor flexbox. Estoy configurando el tamaño del iFrame con JS. El problema es que la página se carga dos veces, primero supongo que con la configuración estándar y luego con las que configuré con JS.

¿Cómo puedo evitar la doble carga?

Te doy un JSFiddle porque el efecto no se ve en un StackSnippet debido al sandboxing de cookies

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; });