Изменение размера окна iframe при изменении размера окна

Question

Я хочу разместить iframe рядом с боковой панелью. Боковая панель имеет константу с 250px, и я хочу, чтобы ширина iframe заполнила остальную часть экрана. Таким образом, ширина будет размером окна минус 250 пикселей. И мне нужно, чтобы это изменилось динамически. Я придерживаюсь своего существующего кода.

<script type="text/javascript">$(window).resize(function() { 
    $('iframe').prepend(width:$(window).width()px;); 

}); 

</script> 
<div style="float:left;"><iframe src="iframe url" 
frameborder="0" 
noresize="noresize" id ="iframe" 
style="position:absolute; background:transparent; width:75%;height:100%;top:38px;border:none;padding:0;" /> 
</iframe> 
</div> 

Это javascript и iframe. Что я делаю не так?

Answer 1

Используйте этот JS:

$(function() { 
    var newwidth = $(window).width() - 250; 
    $('iframe').css({width: newwidth+'px'}); 
}); 

$(window).resize(function() { 
    var newwidth = $(window).width() - 250; 
    $('iframe').css({width: newwidth+'px'}); 
}); 

Вы должны также сделать окружающее положение DIV: относительно использовать абсолютное позиционирование.

Answer 2

Это будет работать, чтобы заполнить любое пространство, у вас есть ответно и сохранить оригинальный размер, если экран еще больше: https://jsfiddle.net/koaab543/2/

Я использую исходную высоту и ширину, чтобы рассчитать пропорции. Затем получить текущую ширину, ограниченную размером пространства css, и получить новую высоту от этого.

высота/ширина = х/currentWidth

function responseveIframe() { 
 
    $('iframe').height(
 
    $('iframe').attr("height")/$('iframe').attr("width") * $('iframe').width() 
 
); 
 
} 
 

 
responseveIframe(); 
 

 
$(window).resize(function() { 
 
    responseveIframe(); 
 
});

iframe { 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>