HTML5 视频海报图像无法在 iPad 视网膜上全屏缩放

Question

我在网站上有一个全屏视频。在 iPad 上，我想加载海报图像，所以它也是全屏的。我的标记和 css 在低分辨率 iPad Mini 上工作，但在 iPad Retina 上不能全屏显示。

html...

    <video autoplay poster="/images/styles/vid_home_screenshot.jpg" id="bgvid" loop>
        <source src="/video/Globe_vid_main_1280x720_v4.mp4" type="video/mp4" />
        <source src="/video/Globe_vid_main_1280x720_v4.webm" type="video/webm" />
        <source src="/video/Globe_vid_main_1280x720_v4.ogv" type="video/ogg" />     
    </video>

这是视频元素上的 css...

video {position: absolute;
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
       z-index: -100;
       transition: 1s opacity;
       top: 0;
       left: 50%;
       transform: translate(-50%,0);
       -webkit-transform: translate(-50%,0);
       }

Answer 1

position: fixed;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
z-index: -100;
background-size: cover;
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover;
left: 50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);