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?
.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>
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>
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.