How to set iframe size dynamically

Question

How should I set the dimensions of an iframe dynamically, so the size is flexible for different viewport sizes?

For example:

<iframe src="html_intro.asp" width="100%" height="300">   <p>Hi SOF</p> </iframe> 

In this case the height is different depending on the browser's window size. It should be set dynamically depending on the size of the browser window.

At any size, the iframe aspect ratio should be the same. How can this be done?

Answer 1

If you use jquery, it can be done by using $(window).height();

<iframe src="html_intro.asp" width="100%" class="myIframe"> <p>Hi SOF</p> </iframe>  <script type="text/javascript" language="javascript">  $('.myIframe').css('height', $(window).height()+'px'); </script> 

Answer 2

Not quite sure what the 300 is supposed to mean? Miss typo? However for iframes it would be best to use CSS :) - Ive found befor when importing youtube videos that it ignores inline things.

<style>     #myFrame { width:100%; height:100%; } </style>  <iframe src="html_intro.asp" id="myFrame"> <p>Hi SOF</p> </iframe>