视频在移动设备上无法正确缩放答案

【问题标题】：Video is not scaling properly on mobile device视频在移动设备上无法正确缩放
【发布时间】：2013-09-05 14:19:48
【问题描述】：

我在 DIV 中嵌入了一个视频，并希望它根据浏览器的大小进行缩放（直到某个点）。这一切都很好，但在 iPhone 上，缩放不起作用。

这是一个有效的实时链接： http://www.craigzilla.dk/upload/template.html

下面是它在 iPhone 上的屏幕截图，其中视频未按比例放大以适应水平方向： https://www.dropbox.com/s/xs2fex89td710ip/Photo%2005-09-13%2016.11.14.png

这是一个 jsFiddle http://jsfiddle.net/craigzilla/EWgFm/

这是视频css：

.projectWrapper {
    max-width: 960px;
    min-width: 320px;
    margin: auto;
}
video {
    width: 100%;
}

有什么办法可以强制视频填充水平空间吗？

【问题讨论】：

你试过video { width: 100% !important; }
不确定，我无法在浏览器中复制。我认为这是iPhone的事情。你在某个地方设置了最小高度吗？如果它在任何地方都这样做，那就可以解释它了。
视频{宽度：100%！重要； } 没有区别。而且我在任何地方都没有蚂蚁最小高度。

标签： css html video scale

【解决方案1】：

试试这个：

CSS：

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML：

<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Demo

【讨论】：