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="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>src请注意，为了解释起见，我将您的视频更改为占位符视频。