iOS中响应迅速的HTML5视频大小调整

我们在显示快速响应的HTML5视频和获得正确的比例方面遇到了困难

在桌面浏览器上，缩放效果很好——视频和海报图像的缩放效果完美。然而，在iPhone Safari上，视频并没有填满整个宽度，在周围留下了一个黑色的“边框/填充”

CSS

.hero-video {
    /* The Container */
height: 338px;
width: 66.6%;
}
.hero-video video {
height: auto;
width: 100%;
}

HTML

<div class="hero-video">
    <video id="intro-video" controls preload="auto" poster="img/trigger-intro.png" width="auto" height="auto">
    <source src="media/intro.mp4" type='video/mp4' />
    <source src="media/intro.webm" type='video/webm' />
        Your browser does not support this video.
    </video>
</div>

您的浏览器不支持此视频。

这对我很有用。

<video autoplay="autoplay" id="background" loop="loop" muted="" poster="solar.jpg" data-autoplay="" playsinline="" height="750" width="1600">
<source src="solar5.mp4" type="video/mp4">
</video>

#background {
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
-webkit-transform: translateX(0%) translateY(-20%);
transform: translateX(0%) translateY(-20%);
background: url("solar.jpg") no-repeat;
background-size: cover;
opacity: 1;
}
.video {
position:relative;
padding-bottom:44.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

我很确定你可以进一步修改和清理HTML标记和CSS规则，但到目前为止，这在iPhone、Android和KindleFire设备上都是可行的

对于视频HTML标记，我使用了这个。

<video autoplay="autoplay" id="background" loop="loop" muted="" poster="solar.jpg" data-autoplay="" playsinline="" height="750" width="1600">
<source src="solar5.mp4" type="video/mp4">
</video>

#background {
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
-webkit-transform: translateX(0%) translateY(-20%);
transform: translateX(0%) translateY(-20%);
background: url("solar.jpg") no-repeat;
background-size: cover;
opacity: 1;
}
.video {
position:relative;
padding-bottom:44.25%;
padding-top:30px;
height:0;
overflow:hidden;
}

---

你能直观地描述一下这个问题吗？是海报没有填满视频标签的整个宽度吗？顺便说一句，我认为width=“auto”是无效的值，您需要以像素为单位设置它（静态或CSS/JS动态值）。感谢您的回复-这很难共享，因为它的客户端在此阶段在NDA下工作。海报没有填满视频的全部宽度。我将尝试删除width=“auto”并查看它的运行情况。。。