流體寬度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%; 
}