HTML5 视频海报不适合移动设备答案

【问题标题】：HTML5 video poster doesn't fit mobileHTML5 视频海报不适合移动设备
【发布时间】：2016-01-16 03:46:16
【问题描述】：

我的网站上有一个背景 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;
}

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

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

截图：http://imgur.com/hZuKHAx

网站 CSS 布局：http://jossefbn.com/css/layout.css

请帮帮我！

【问题讨论】：

嗨，我不确定人们是否会喜欢在 1500 行 CSS 中寻找一个小错误。您能否发布相对于 video 元素的 CSS？也许所需输出的图像也会有所帮助。
这不是一个小错误，因为在移动/平板设备上，视频不能作为背景加载，但海报图片可以加载，所以如果图片海报加载不正确，网站布局我们会看起来很可怕！我马上更新帖子
相关：stackoverflow.com/questions/10826784/…

标签： css html mobile html5-video

【解决方案1】：

您可以按宽度和高度调整视频或拉伸它（在移动情况下通过媒体查询）。

拉伸

 #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%;
}

【讨论】：