第三方 iframe 内联样式更改答案

【问题标题】：Third party iframe inline style change第三方 iframe 内联样式更改
【发布时间】：2018-11-10 00:43:33
【问题描述】：

我需要更改第三方iframe 内联样式。如何做到这一点，请告诉我。

通过iframe 显示我们网站的第三方视频播放器。它在正常视图中工作正常，但响应不正确显示。

<iframe src="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;" allowfullscreen="true" allowtransparency="true" id="" name="" frameborder="0"></iframe>

我需要改变位置和宽度只响应如何做到这一点？

【问题讨论】：

Media queries not working inside an iframe的可能重复

标签： jquery html css wordpress iframe

【解决方案1】：

你可以通过 jquery 来做。

请使用$(window).width() 方法获取设备的宽度，并根据条件将内联css 应用到准备好文档的iframe。例如-

var width = $(window).width();

if(width >= 1080) {
    $("iframe").css("width: 100%; height: 100%; position: absolute; left: 0; top: 0;");
} 

else if(width >= 800 ) {
    $("iframe").css("width: 100%; height: 100%; position: absolute; left: 0; top: 0;");
} 

else if(width >= 400 ) { // for mobile devices
    $("iframe").css("width: 100%; height: 100%; position: absolute; left: 0; top: 0;");
} 

else if(width >= 300 ) { // for mobile devices
    $("iframe").css("width: 100%; height: 100%; position: absolute; left: 0; top: 0;");
}

【讨论】：

【解决方案2】：

您可以使用 css 媒体查询，

@media screen and (min-width: 320px) and (max-width: 479px) {//android and ios
iframe {
   //css here
}
}
@media screen and (min-width: 480px) and (max-width: 767px) {//for tablet devices
iframe {
   //css here
}
}
@media screen and (max-width: 992px) {//for medium scale devices
iframe {
   //css here
}
}
@media only screen  and (min-width : 1224px) {//for desktops and laptops
iframe {
   //css here
}
}

确保以下元标记处于响应状态。

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：