Third party iframe inline style change

Question

I need to change third party iframe inline style. How to do this please let me know.

3rd party video player to display our site via iframe. It's working fine in normal view but responsive it's not display properly.

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

I need to change the position & width only responsive how to do this?

Possible duplicate of [Media queries not working inside an iframe](https://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe) — Ali, May 31 '18 at 05:41

score 3 · Answer 1 · answered May 31 '18 at 06:08

You can do it via jquery.

Please use $(window).width() method to get width of you device and based on condition you can apply inline css to your iframe on document ready. for ex-

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

score 0 · Answer 2 · answered Jun 12 '18 at 08:56

You can use css media queries,

@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
}
}

make sure the following meta tag is in in order the responsive to work.

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

Third party iframe inline style change

2 Answers2