jquery - 第三方iframe内联样式更改

Question

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

第 3 方视频播放器通过 iframe 显示我们的网站。它在正常 View 中工作正常，但响应灵敏，无法正确显示。

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

我需要仅响应式更改位置和宽度，如何做到这一点？

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