如何将视频右对齐？

Question

I have an HTML5 video with a height greater than its width. I gave the video 100% in height and 100% in width , so it scales automatically depending ob my window size.

But I want the video to be on the right ob its container. In the image below, you can see that the video places its content in center..

How can I achieve that?

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

The main issue is, that the video has a width: 100%; . As such it spans the entire parent's width even when the width of the video is smaller than the parent. Remove the .video { width: 100%; } .video { width: 100%; } to fix that. After that, you can align it to the right of the container by using: 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

There is nothing wrong with your css style, it is the problem about the video . It contains lots of space.

You could use object-fit and width to change and crop the video

 .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

For the video to scale automatically you should use another div to nest your video in. As @tacoshy mentioned, the width 100% is the main problem as it prevents us from using margin-left auto. Hence, losing the scalability.

Now you can use width: fit-content; to contain the video and set the height to 100% as expected. Then just add margin-left: auto; on the new div instead of the video itself, this way it scales.

 .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 Solution (even with shrinking viewport height) ~

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