使用 CSS 旋转视频并使其适合屏幕

Question

我有以下风格：

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

这是视频元素：

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

这似乎将视频旋转并居中，但它几乎是屏幕尺寸的 1/4。怎样让它适合屏幕？

Answer 1

在这种情况下，新的 CSS3 单元就派上用场了。如果您只是使用正常百分比来指定 <video> 元素的 width 和 height，它们将默认将这些尺寸与其视口对应物相关联 - 但仅在旋转之前。因此旋转后，这些值将不再正确对应视口尺寸。

由于在这种情况下您实际上想要相反的结果，因此您可以使用 height: 100vw 和 width: 100vh 明确指定您希望 height 根据视口宽度进行测量，并且 width 在视口高度方面。

如果尺寸正确，您还需要更改视频旋转的点。否则，很难将视频的边缘与视口的边缘对齐，如这个专业制作的视觉示例所示：

经过这次调整，最后一步就是将视频向上移动一定量，以使其与视口顶部齐平。这个数额是多少？嗯，视频的 height - 我们指定为 100vw。（我为此使用了否定 margin-top。）

实施这些更改（并设置 object-fit: cover 因此没有空格可见），我们最终得到：

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>

希望这对您有所帮助！如果您有任何问题，请告诉我。

使用 CSS 旋转视频并使其适合屏幕

Rotate a video and fit it to screen using CSS

html

css

video

mp4