如何左对齐 Vimeo 嵌入

Question

当我嵌入 Vimeo iFrame 时，内容会自动居中。我想控制 iFrame 的对齐并将其保持在左侧。 （iFrame 很严重。）

我设置了一个 flexbox 容器 (.example-div)，里面有两个 flex 容器。第一个容器 (.player-div) 中有股票 Vimeo iFrame 播放器。理想情况下，第二个容器将包含一个信用列表。我似乎无法证明左侧的 iframe 是合理的。

HTML

<div class="example-div">
  <div class="player-div">
    <iframe src="https://player.vimeo.com/video/142760309" frameborder="0" width="100%" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
  <div class="credits-div">
  </div>
</div>

CSS

body {
  margin: 0;
}

.example-div {
  height: 100vh;
  display: flex;
}

.player-div {
  background-color: orange;
  width: 80vw;
}

.credits-div {
  background-color: green;
  width: 20vw;
}

.player-div iframe, .player-div object, .player-div embed {
    width: 100%;
    height: 100%;
}

https://codepen.io/czeins/pen/dxJywB

Answer 1

您的问题完全发生在iframe 代码之外。 Flex-box 不响应width。在display:flex 容器中，您应该使用min/max 或flex-basis 来设置大小...这里是some docs。

基本上，您的 flexbox CSS 应该如下所示：

.example-div {
  height: 100vh;
  display: flex;
  justify-content: space-between; // forces the two items to each side
}

.player-div {
  background-color: orange;
  flex-basis: 80%;
}

.credits-div {
  background-color: green;
  flex-basis:20%;
}

---

现在带有width:100% 的 iFrame 将填充 flex 容器。但是，您会遇到一些额外的问题，因为 100% 宽度的视频不会考虑不同的纵横比。

您基本上还需要设置 iFrame 的高度。这很容易，只是视频的高度实际上是现在动态宽度的百分比。例如，典型的宽屏视频是 16:9 的比例（单位宽乘高单位）。所以当宽度改变时，高度也必须改变。

最简单的方法是创建另一个容器，如 div（在 flex-container 内），并使用绝对定位和填充来正确调整视频大小。

这是一个 good explanation 的工作原理和一个 codepen 的实际操作。