html - 如何左对齐 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(单位宽 x 单位高)。所以当宽度改变时，高度也必须改变。

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

这是一个 good explanation它是如何工作的以及codepen它在行动。