链接中包含的iframe的大小 - 如何调整移动/桌面的大小?

时间:2016-01-25 20:38:29

标签: html css iframe

我有一个iframe,其中包含来自网站的视频流,而src属性包含它的大小:

<iframe src="http://xxxxxxx.com/accounts/xxxxxx/events/xxxxxx/player?width=320&height=180 frameborder="0" scrolling="no"> </iframe>

我希望随着视口变大来扩大规模(例如移动设备的宽度为320像素,桌面设置为960像素),但是当我通过CSS给它一个大小时,内容不会扩展到整个iframe,因为链接中的大小是错误的。

任何想法的人

1 个答案:

答案 0 :(得分:-1)

CSS媒体查询将是您轻松的解决方案。您将不得不花时间将其应用于所有设备。您可以将它应用于所有iFrame,但我建议您定义一个类:

.myFrame {
    width: 960px
}
@media screen and (max-width: 480px) {
    .myFrame {
        width: 320px
    }
}
<iframe class="myFrame" src="www.iframecontent.com/content"></iframe>

更高级的解决方案是使用像pym.js这样的javascript工具

http://blog.apps.npr.org/pym.js/