处理移动设备的嵌入式视频宽度高度

Question

我有一个网站页面。我使用bootstrap来创建它。它响应迅速，对大多数元素都很有效。

除了一个嵌入的vimeo视频。我按如下方式配置它：

 <div class="col-md-7">
        <iframe src=$VIDEO_URL controls=false
           width="640"
           height="400"
           frameborder="0"
           webkitallowfullscreen mozallowfullscreen allowfullscreen>
        </iframe> 
 </div>

如你所见，我有固定的宽度和高度。这会在移动设备上产生问题，并且不适合设备的宽度。

如何解决此问题？

Answer 1

尝试使用mine width / max-width或min-height和max-height作为embebded视频或者你可以设置宽度/高度到容器div而不是视频本身（并设置视频宽度/高度为auto /百分比）。

Answer 2

我不确定哪些浏览器正式支持此功能，但您可以使用“100％”而不是iframe的宽度和高度中的多个像素来缩放视频，而无需进入CSS。

<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen>
</iframe>

https://jsfiddle.net/pjpwea/pw8btzky/

Answer 3

好的..我通过媒体查询解决了这个问题

@media(max-width:639px) {
        iframe {
                width: 480px;
                height: 300px;
        }
}

@media(max-width:320px) {
        iframe {
                width: 320px;
                height: 180px;
        }
}