Rotate a video and fit it to screen using CSS

Question

I have the following style:

video {
    position: absolute;
    transform: rotate(90deg);
    width: 100%;
    height: 100%;
    z-index: 4;
    visibility: visible;
}

This is the video element:

<video id="myVideo" src="/Space4.mp4" autoplay loop></video>

This seems to rotate and center the video, but it is almost 1/4 of the screen size. How can make it fit to screen?

Answer 1

This is a case where the new CSS3 units come in handy. If you just use normal percentages to specify the width and height of the <video> element, they will default to associating these dimensions with their viewport counterparts - but only prior to the rotation. So after rotation, these values will no longer correspond correctly to the viewport dimensions.

Since you actually want the opposite in this case, you can use height: 100vw and width: 100vh to explicitly specify that you want height measured in terms of viewport width, and width in terms of viewport height.

With the correct sizing, you'll also need to change the point around which the video is rotated. Otherwise, it becomes difficult to align the edges of the video with the edges of the viewport, as shown in this expertly crafted visual example:

Following this adjustment, the last step is just to move the video upwards by a certain amount, in order to make it flush against the top of the viewport. How much is that amount? Well, the height of the video - which we specified as 100vw. (I used a negative margin-top for this.)

Implementing these changes (and setting object-fit: cover so no whitespace is visible), we end up with:

html,
body {
  margin: 0; /* Because annoying default browser margins */
}
video {
  position: absolute;
  transform: rotate(90deg);

  transform-origin: bottom left;
  width: 100vh;
  height: 100vw;
  margin-top: -100vw;
  object-fit: cover;

  z-index: 4;
  visibility: visible;
}

<video id="myVideo" src="http://html5demos.com/assets/dizzy.mp4" autoplay loop></video>

Hope this helps! Let me know if you have any questions.