Question

我需要更改第三方iframe内联样式。怎么做请告诉我。

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

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

我需要改变位置＆amp;宽度只响应怎么做？

Answer 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;");
}

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

第三方iframe内联样式更改

2 个答案: