如何将视频右对齐？

Question

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

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

我怎样才能做到这一点？

视频元素的屏幕截图

 .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%; } .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的问题。 它包含很多空间。

您可以使用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 auto。 因此，失去了可扩展性。

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

 .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>