iPad 上的视频太小（高度）答案

【问题标题】：Video too small on iPad (height)iPad 上的视频太小（高度）
【发布时间】：2014-06-17 17:04:25
【问题描述】：

想要在引导响应网站中显示视频。

在我的 CSS 文件中，我将视频标签宽度定义为 .span7 框的 100%，并将高度设置为自动。当我更改浏览器窗口的宽度时，在桌面上效果很好。在 iPhone 上，它看起来也很不错。

仅在 iPad 上，视频宽度为 100 %，但高度仅为大约 2 个引导行。那太小了。为什么？

为什么 iPad 上的 Safari mobile 高度这么小？

【问题讨论】：

你有没有想过这个问题？我也有类似的问题。
是的。我使用 fitvids(fitvidsjs.com)。我解决这个问题的最好方法。不要忘记也包括 JQuery！
必须说我嵌入了来自 YouTube 的视频，并通过 fitvids 使它们响应。我不再使用 html video 标签了。

标签： html video twitter-bootstrap responsive-design

【解决方案1】：

这是我在 iPad 上使用的技巧：

<div class="video">
    <canvas width="960" height="540"></canvas>
    <video preload="none" width="960" height="540" controls poster="video.jpg">    
         <source src="video.mp4" type="video/mp4">
         <source src="video.webm" type="video/webm">
         Your browser does not support the video tag.
    </video>
</div>

CSS：

.video {
    position: relative;
}
.video video,
.video canvas {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
 }
video {
    height: 100% !important;
    position: absolute;
}

包括预览图像（海报），就像一个魅力。

【讨论】：