旋转视频并使用CSS将其调整到屏幕

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

由于在这种情况下您实际上想要相反的结果,您可以使用 height: 100vw 和 width: 100vh 显式指定 身高 根据视口宽度测量,以及 宽度 就视口高度而言。

使用正确的大小,您还需要更改视频旋转的点。否则,很难将视频的边缘与视口的边缘对齐,如这个精心制作的视觉示例所示:

在此调整之后,最后一步是将视频向上移动一定量,以使其与视口顶部齐平。这个数额是多少?嗯 身高 我们指定为 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>

希望这有帮助!如果你有任何问题,请告诉我。