html - 使用 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 单元会派上用场。如果您只是使用正常百分比来指定 width和 height的 <video>元素，它们将默认将这些尺寸与其对应的视口(viewport)相关联——但仅在旋转之前。因此在旋转之后，这些值将不再正确对应于视口(viewport)尺寸。

因为在这种情况下你实际上想要相反的东西，你可以使用 height: 100vw和 width: 100vh明确指定您想要 height根据视口(viewport)宽度测量，width在视口(viewport)高度方面。

如果尺寸正确，您还需要更改视频旋转所围绕的点。否则，很难将视频的边缘与视口(viewport)的边缘对齐，如这个精心制作的视觉示例所示:

在这个调整之后，最后一步就是将视频向上移动一定量，以使其与视口(viewport)顶部齐平。这个数额是多少？嗯，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>

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