How can I align a video to the right?-CodePudding

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

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

CodePudding user response：

The main issue is, that the video has a width: 100%;. As such it spans the entire parents width even when the videos width is smaller then the parent. Remove the .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 >
  <div >

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

CodePudding user response：

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

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

CodePudding user response：

@カメロン, here is a screenshot where the video is not on the right when the window is not high enough. :) (Only safari!) image 1 image 2

CodePudding user response：

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

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

Solution for Safari ~

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

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

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

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

<div >
  <div >

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