Смена стороннего встроенного стиля iframe

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>

Мне нужно изменить положение и ширину только в зависимости от того, как это сделать?

Answer 1

Вы можете использовать медиа-запросы 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">

Answer 2

Вы можете сделать это с помощью 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;");
}