100vh Vimeo 播放器 iframe

问题描述

我正在嵌入 Vimeo 视频并遇到了一些样式问题。这是我使用的播放器：https://developer.vimeo.com/player/sdk 对于每个视口尺寸，播放器都应该完全填满屏幕，因此 min-width: 100vh 和 min-height: 100vw。

我设法使播放器适合宽度，使用

  ::v-deep iframe {
    min-width: 100vw;
    min-height: 100vw;

    .player {
      width: 100vw;
      height: 100vh;
    }

  }

然而，它忽略了最小高度。有没有人知道如何解决这个问题？

编辑：到目前为止，我的代码如下：

body {
background-color: yellow;
padding: 0;
margin: 0;
}
.container {
 height: 100vh;
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden; 
}
iframe {
  min-width: 100vw;
  min-height: 100vw;
}

.player {
 width: 100vw;
 height: 100vh;
}

<div class="h-screen flex items-center justify-center overflow-hidden">
   <iframe id="player1" src="https://player.vimeo.com/video/76979871" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vimeo-player vue.js