css - 流宽 HTML5 视频不能在 iPad 或 iPhone 上运行？

Question

您好，我有一些视频在我的桌面上观看时会响应地缩小尺寸。

我正在使用……

video {
width: 100%;
height: auto;
}

如我所说，如果您在我的桌面上缩小浏览器，效果会很好。但是，当我在 iPad 或 iPhone 上观看时，视频并没有按比例缩小。

我读到您需要指定视频的高度和宽度才能在这些设备上正确显示，但是如果我这样做，它们将不再流畅。

知道我哪里出错了吗？

非常感谢

Answer 1

 <div class="videoWrapper">  
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
    </div>

    .videoWrapper {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            padding-top: 25px;
            height: 0;
    }
    .videoWrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
}