HTML移动视频定位问题

Question

我有一个占据整个页面的全屏视频。视频在桌面上以完整的宽度和高度显示。但是，它仅在移动设备上显示其中的一部分。没关系，尽管我想将视频中显示的部分更改为向左移动。这是一个视觉辅助工具，可以显示我想问的问题： https://i.stack.imgur.com/zU9qc.jpg这是我的代码：<video autoplay muted loop id="myVideo">  <source src="header7.mp4" type="video/mp4"></video><style>    #myVideo {  position: fixed;  right: 0;  bottom: 0;  min-width: 100%;  min-height: 100%;}}</style> 

Answer 1

为了使您的视频在任何屏幕上全屏显示，我建议将min-width和max-width属性更改为width和height并使用视口单位。一种方法可以是：

#myVideo {

  position: fixed;

  right: 0;

  bottom: 0;

  width: 100vw;

  height: 100vh;

}

<video autoplay muted loop id="myVideo">

  <source src="//techslides.com/demos/sample-videos/small.mp4" type="video/mp4">

</video>

src请注意，为了解释起见，我将您的视频更改为占位符视频。