如何將視頻右對齊？

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>