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    lt iframe src  html intro asp  width  100   height  300  gt     lt p gt Hi SOF lt  p gt   lt  iframe gt    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

User · Answer

The height is different depending on the browser s window size  It should be set dynamically depending on the size of the browser window  lt  DOCTYPE html gt       lt html gt       lt body gt            lt center gt  lt h2 gt Heading lt  h2 gt  lt  center gt       lt center gt  lt p gt Paragraph lt  p gt  lt  center gt            lt iframe src  quot url quot  height  quot 600 quot  width  quot 1350 quot  title  quot Enter Here quot  gt  lt  iframe gt            lt  body gt       lt  html gt

User · Answer

If you use jquery  it can be done by using   window  height      lt iframe src  html intro asp  width  100   class  myIframe  gt   lt p gt Hi SOF lt  p gt   lt  iframe gt    lt script type  text javascript  language  javascript  gt       myIframe   css  height     window  height    px     lt  script gt

User · Answer

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     lt style gt       myFrame   width 100   height 100      lt  style gt    lt iframe src  html intro asp  id  myFrame  gt   lt p gt Hi SOF lt  p gt   lt  iframe gt

User · Answer

I ve found this to work the best across all browsers and devices  PC  tables  amp  mobile     lt script type  text javascript  gt                        function iframeLoaded                               var iFrameID   document getElementById  idIframe                              if iFrameID                                       here you can make the height  I delete it first  then I make it again                                 iFrameID height                                       iFrameID height   iFrameID contentWindow document body scrollHeight    px                                                                               lt  script gt      lt iframe id  idIframe  onload  iframeLoaded    frameborder  0  src  yourpage php  height  100   width  100   scrolling  no  gt  lt  iframe gt

User · Answer

Have you tried height  100   in the definition of your iframe   It seems to do what you seek  if you add height 100  in the css for  body   if you do not  100  will be  100  of your content     EDIT  do not do this  The height attribute  as well as the width one  must have an integer as value  not a string

[html] How to set iframe size dynamically

Examples related to html

Examples related to iframe

Examples related to resize