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