100vh Vimeo 播放器 iframe答案

【问题标题】：100vh Vimeo Player iframe100vh Vimeo 播放器 iframe
【发布时间】：2021-08-09 00:17:33
【问题描述】：

我正在嵌入一个 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>

【问题讨论】：

你能在你的问题中举个例子吗 - 目前我不太明白你所说的玩家填充视口是什么意思，因为他们可能有不同的纵横比。
我无法提供示例，因为我无法让它发挥作用。我的意思是整个窗口总是被视频覆盖。如果窗口纵横比与视频纵横比不同，则视频将被切断。
好的，所以听起来你希望它在背景大小或对象匹配上表现得像封面一样。你说你设法让播放器适应宽度，所以这将是一个很好的代码示例，我们可以从那里得到它。
这里是一个 jsFiddel：jsfiddle.net/#&togetherjs=ev5AkOjwVG 基本上，我不想一直看到黄色区域。
您的链接似乎只是将我带到协作 jsfiddle。请您在问题中将您的示例放在 Stackoverflow sn-p 中，而不是在外部服务中。见[链接]stackoverflow.com/help/minimal-reproducible-example

标签： css vue.js vimeo-player

【解决方案1】：

如果视口很窄（即其纵横比小于视频的纵横比），则要求视频占据视口的整个高度，然后使其太宽的位为裁剪。在这个 sn-p 中，假设在这种情况下视频应该水平居中。

Converseley，如果视口太宽，视频应该占据视口的整个宽度，并且应该上下裁剪。

这个 sn-p 使用一个简单的容器来保存视频，以及一个内置的视频纵横比。应该更改此宽高比以匹配要播放的任何视频（或使用 Javascript 来找出加载时的内容，并相应地更改 CSS 变量 --videoRatio）。它根据设备和视频的相对纵横比计算所需的高度和宽度。

body {
  overflow: hidden;
}
.container {
     --videoRatio: calc(16 / 9); /* CHANGE THIS IF THE VIDEO CHANGES */
    background-color: yellow;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
    /* to start with assume that the viewport is wide enough for the video taking up full width the height will be at least 100vh */
iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}
    /* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*the viewport is too narrow for the full video */
  iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

<body>
    <div class="container">
       <iframe id="player1" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>
    </div>
</body>

【讨论】：