流体宽度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%;
}