如何将视频右对齐？

Question

我有一个 HTML5 视频，其高度大于宽度。我给了视频 100% in height 和 100% in width，所以它会根据我的 window 大小自动缩放。

但我希望视频位于其容器的右侧。在下图中，您可以看到视频将其内容放在中心..

我怎样才能做到这一点？

screenshot of video element

.container {
width: 100%;
display: flex;

}

.left,
.right {
height: 100vh;
width: 50%;
border: 1px dotted blue;
display: flex;
align-items: center;
}

.video {
    width: 100%;
    height: 100%;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="" type="video/mp4">
    </video>
  </div>
</div>

Answer 1

主要问题是视频有 width: 100%;。因此，即使视频的宽度小于父级，它也会跨越整个父级的宽度。删除 .video { width: 100%; } 来解决这个问题。之后，您可以使用以下命令将其对齐到容器的右侧：margin-left: auto

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  width: 50%;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  height: 100%;
  margin-left: auto;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 2

你的css风格没有问题，是video的问题。它包含很多 space.

您可以使用 object-fit 和 width 来更改和裁剪视频

.container {
width: 100%;
display: flex;
}

.left,
.right {
height: 100vh;
width: 50%;
border: 1px dotted blue;
align-items: center;
overflow:hidden
}

.video {
    width: 110%;
    height: 110%;
    border: 2px solid red;
    margin-left:calc(-2vw);
    margin-top:calc(-2vh);
    object-fit:cover
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 3

要使视频自动缩放，您应该使用另一个 div 来嵌套您的视频。正如@tacoshy 提到的，宽度 100% 是主要问题，因为它阻止我们使用 margin-left汽车。因此，失去了可扩展性。

现在您可以使用 width: fit-content; 来包含视频并将高度设置为预期的 100%。然后只需在新的 div 上添加 margin-left: auto; 而不是视频本身，这样它就会缩放。

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  flex: 1;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  width: 100%;
  height: 100%;
}

.right>div {
  height: 100%;
  width: fit-content;
  margin-left: auto;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div>
      <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4"></video>
    </div>
  </div>
</div>

Safari 解决方案（即使缩小视口高度）~

.container {
  width: 100%;
  display: flex;
}

.left,
.right {
  height: 100vh;
  flex: 1;
  border: 1px dotted blue;
  display: flex;
  align-items: center;
}

.video {
  max-width: 100%;
  height: 100%;
}

.right>div {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

<div class="container">
  <div class="left">

  </div>
  <div class="right">
    <div>
      <video class="video" playsinline loop autoplay muted>
      <source src="https://marceldiedrich.com/so/video-hor.mp4" type="video/mp4"></video>
    </div>
  </div>
</div>

如何将视频右对齐？

How can I align a video to the right?

html

css

video

responsive