css - 视频在移动设备上无法正确缩放

Question

我在 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%;
}

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

Answer 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>

演示