javascript - 如何防止两次加载 Vimeo 视频播放器 iFrame

Question

我在 flexbox 容器中显示 Vimeo 视频 iFrame。我正在用 JS 设置 iFrame 的大小。问题是页面加载了两次，首先我猜是标准设置，然后是我用 JS 设置的那些。

如何防止双重加载？

我给你一个 JSFiddle，因为由于 cookie 沙盒，在 StackSnippet 中看不到效果

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

标签： javascriptcssiframeflexboxvimeo-api