Css HTML5视频海报不'；t-fit手机

我的网站上有一个HTML5背景视频：

<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="images/poster.png"> 
 <source src="videos/video-1.webm" type="video/webm"> 
 <source src="videos/video-1.mp4" type="video/mp4"> 
 <source src="videos/video-1.ogg" type="video/ogg">
 <p>Your browser does not support the video element. Try this page in a modern browser!</p>  
</video>

但海报图像在移动和平板电脑设备上无法正常工作，无法缩放以适应整个窗口分辨率

我的问题是如何使海报图像适合任何移动/平板设备的窗口。

截图：

网站CSS布局：

---

请帮帮我，我卡住了

您可以按宽度和高度调整视频，也可以（在移动环境下通过媒体查询）拉伸视频

伸展

 #video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    //stretch 
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

宽度和高度：

 #video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

---

嗨，我不确定人们会喜欢在1500行CSS中寻找一个小错误。你能发布与

视频
元素相关的CSS吗？也许一幅期望输出的图像也会有所帮助。这不是一个小错误，因为在移动/平板电脑设备上，视频不能作为背景加载，但海报图像可以加载，因此如果图像海报加载不正确，我们的网站布局会很糟糕！！我将立即更新帖子相关内容：
 #video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}