由于在这种情况下您实际上想要相反,您可以使用height：100vw和width：100vh来明确指定您希望根据视口宽度测量高度,并根据视口高度测量宽度.

使用正确的大小调整,您还需要更改视频旋转的点.否则,很难将视频的边缘与视口的边缘对齐,如此专业制作的可视化示例所示：

在此调整之后,最后一步是将视频向上移动一定量,以使其与视口顶部齐平.这个金额多少钱？嗯,视频的高度 – 我们指定为100vw. (我为此使用了负余量顶部.)

实现这些更改(并设置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;
}