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>

<强> Demo

视频在移动设备上无法正常缩放

1 个答案: