Making an iframe responsive

Question

I was reading this stackoverflow post titled  Can you make an iFrame responsive    and one of the comments answers led me to this jfiddle   But when I tried to implement the HTML and CSS to fit my needs  I didn t have the same results success  I created my own JS fiddle so I could show you how it doesn t work the same for me  I m sure it has something to do with the type of iFrame I m using  e g   the product images might need to be responsive too or something    My main concern is that when my blog readers visit my blog on their iPhone  I don t want everything to be at x width  100  for all my content  and then the iFrame misbehaves and is the only element wider  and hence sticks out past all the other content - if that makes sense     Anyway  does anyone know why it s not working  thank you   here is the HTML  amp  CSS of MY JSFIDDLE  if you don t want to click on the link     lt div class  wrapper  gt     lt div class  h iframe  gt       lt  -- a transparent image is preferable -- gt       lt img class  ratio  src  http   www brightontheday com wp-content uploads 2013 07 placeholder300 png    gt       lt iframe frameborder  0  height  465px  width  470px  scrolling  no  src  http   currentlyobsessed me api v1 get widget wid 30 amp blog Brighton The Day amp widgetid 38585        frameborder  0  allowfullscreen gt  lt  iframe gt     lt  div gt   lt  div gt    and here is the accompanying CSS    wrapper     width  100     height  100     margin  0 auto    background   ffffff      h iframe     position  relative      h iframe  ratio     display  block    width  100     height  auto      h iframe iframe     position  absolute    top  0    left  0    width  100     height  100

User · Answer

The best solution to make an  iframe  responsive and fit with all device screens   simply apply this code  working great with Games sites     iframe  -webkit-scrollbar display none   iframe background  fff overflow hidden   iframe iframe width 100  height 540px border 0 display block   iframe-content position absolute width 100  height 540px overflow auto top 0 bottom 0 -webkit-overflow-scrolling touch    media screen and  max-width 992px   iframe iframe height 720px    media screen and  max-width 768px   iframe iframe height 720px    media screen and  max-width 720px   iframe iframe height 720px    media screen and  max-width 479px   iframe iframe height 480px    media screen and  max-height 400px   iframe iframe height 360px     If you re looking for a responsive games container fit with all devices apply this code which uses advanced CSS  media queries

User · Answer

lt div class  wrap gt       lt iframe src     path  gt  lt  iframe gt   lt  div gt    wrap        overflow  auto     iframe  object  embed       min-height  100       min-width  100       overflow  auto

User · Answer

I found a solution from from Dave Rupert   Chris Coyier  However  I wanted to make the scroll available so I came up with this       HTML   lt div class  myIframe  gt       lt iframe gt   lt  iframe gt    lt  div gt       CSS   myIframe        position  relative       padding-bottom  65 25        padding-top  30px       height  0       overflow  auto        -webkit-overflow-scrolling touch     lt  lt --- THIS IS THE KEY       border  solid black 1px      myIframe iframe        position  absolute       top  0       left  0       width  100        height  100

User · Answer

Check out this full code  you can use the containers in percentages like below code    lt html gt   lt head gt   lt title gt How to make Iframe Responsive lt  title gt   lt style gt  html body         height 100     wrapper          width 80  height 100  margin 0 auto background  CCC   h iframe         position relative    h iframe  ratio  display block width 100  height auto    h iframe iframe  position absolute top 0 left 0 width 100   height 100     lt  style gt   lt  head gt   lt body gt   lt div class  wrapper  gt   lt div class  h iframe  gt   lt img class  ratio  src     gt   lt iframe src  http   www sanwebcorner com  frameborder  0  allowfullscreen gt  lt  iframe gt   lt  div gt   lt p gt Please scale the  result  window to notice the effect  lt  p gt   lt  div gt   lt  body gt   lt  html gt    Check out this demo Page

User · Answer

If you happen to be using the Bootstrap CSS library  you can use the responsive embed classes that it provides   lt div class  quot embed-responsive embed-responsive-16by9 quot  gt     lt iframe class  quot embed-responsive-item quot  src  quot https   www youtube com embed zpOULjyy-n8 rel 0 quot  allowfullscreen gt  lt  iframe gt   lt  div gt   Several different aspect ratios are supported  see the documentation

User · Answer

it solved me by adjusting code from  Connor Cushion Mulhall by   x000D   x000D  iframe  object  embed   x000D    width  100   x000D    display  block  important  x000D    x000D   x000D   x000D

User · Answer

iframe    max-width  100   important

User · Answer

iframes cannot be responsive  You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width   The example fiddle link works because it s displaying an embedded youtube video link that does not have a size declared

User · Answer

Fully responsive iFrame for situations where aspect ratio is unknown and content in the iFrame is fully responsive    None of the above solutions worked for my need  which was to create a fully responsive iFrame that had fully responsive dynamic content inside of it  Maintaining any kind of aspect ratio was not an option     Get height of your navigation bar and any content ABOVE or BELOW the iFrame  In my case I only needed to subtract the top navbar and I wanted the iFrame to fill all the way down to the bottom of the screen     Code    function getWindowHeight             console log  Get Window Height Called           var currentWindowHeight     window  height            var iFrame   document getElementById  myframe           var frameHeight   currentWindowHeight - 95          iFrame height   frameHeight            Timeout to prevent function from repeatedly firing     var doit      window onresize   function          clearTimeout doit         doit   setTimeout resizedw  100            I also created a timeout so that on resize the function wouldn t get called a million times

User · Answer

Getting Started  Due to browser security constraints  you will have to include the Javascript file both in the    parent    page  as well as in the page being embedded through an iframe     child       In the current version  the parent page must include the latest version of jQuery  There is no dependency on jQuery for the child page functionality  In future versions  we would like to remove the dependency on jQuery for the parent as well   Note  the    xdomain    parameter in the makeResponsive   function call is optional   Code Sample   lt  -- Activate responsiveness in the  child  page -- gt  lt script src   js jquery responsiveiframe js  gt  lt  script gt  lt script gt   var ri   responsiveIframe     ri allowResponsiveEmbedding    lt  script gt    lt  -- Corresponding code in the  parent  page -- gt  lt script src   js jquery js  gt  lt  script gt  lt script src   js jquery responsiveiframe js  gt  lt  script gt  lt script gt     function                      function               myIframeID   responsiveIframe   xdomain                              jQuery   lt  script gt

User · Answer

Remove iframe height and width specified in pixels and use percentage  iframe   max-width  100

User · Answer

I am search more about this topic and finally get a nice answer  You can try like this    x000D   x000D   wrapper   x000D  width  50   x000D    x000D   container   x000D  height  0  x000D  width  100   x000D  padding-bottom  50   x000D  overflow  hidden  x000D  position  relative  x000D    x000D   container iframe   x000D  top  0  x000D  left  0  x000D  width  100   x000D  height  100   x000D  position  absolute  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  container  gt  x000D       lt iframe src  there is path of your iframe  gt  lt  iframe gt  x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For Example     lt div class  intrinsic-container  gt     lt iframe src    www youtube com embed KMYrIi Mt8A  allowfullscreen gt  lt  iframe gt   lt  div gt   CSS    intrinsic-container     position  relative    height  0    overflow  hidden        16x9 Aspect Ratio     intrinsic-container-16x9     padding-bottom  56 25         4x3 Aspect Ratio     intrinsic-container-4x3     padding-bottom  75       intrinsic-container iframe     position  absolute    top 0    left  0    width  100     height  100

User · Answer

You can use this tricks mentioned on this site http   css-tricks com NetMag FluidWidthVideo Article-FluidWidthVideo php   Its very useful and easy to understand  All you need to create   lt div class  videoWrapper  gt       lt  -- Copy  amp  Pasted from YouTube -- gt       lt iframe width  560  height  349  src  http   www youtube com embed n dZNLr2cME rel 0 amp hd 1  frameborder  0  allowfullscreen gt  lt  iframe gt   lt  div gt    videoWrapper       position  relative      padding-bottom  56 25      16 9        padding-top  25px      height  0     videoWrapper iframe       position  absolute      top  0      left  0      width  100       height  100       Here is your edited js fiddle for demonstration

User · Answer

With the following markup    lt div class  video  gt  lt iframe src  https   www youtube com embed StTqXEQ2l-Y  gt  lt  iframe gt  lt  div gt    The following CSS makes the video full-width and 16 9    video     position  relative    padding-bottom  56 25      16 9        video  gt   video  iframe       position  absolute      width  100       height  100       border  none

User · Answer

This solution worked for me  And I found it easier   https   jameshfisher com 2017 08 30 how-do-i-make-a-full-width-iframe

User · Answer

iFrames CAN be FULLY responsive while keeping their aspect ratio with a little CSS technique called the Intrinsic Ratio Technique  I wrote a blog post addressing this question specifically  https   benmarshall me responsive-iframes   This gist is    x000D   x000D   intrinsic-container   x000D    position  relative  x000D    height  0  x000D    overflow  hidden  x000D    x000D   x000D   x000D     16x9 Aspect Ratio    x000D   x000D   intrinsic-container-16x9   x000D    padding-bottom  56 25   x000D    x000D   x000D   x000D     4x3 Aspect Ratio    x000D   x000D   intrinsic-container-4x3   x000D    padding-bottom  75   x000D    x000D   x000D   intrinsic-container iframe   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  100   x000D    x000D   lt div class  intrinsic-container intrinsic-container-16x9  gt  x000D     lt iframe src    www youtube com embed KMYrIi Mt8A  allowfullscreen gt  lt  iframe gt  x000D   lt  div gt  x000D   x000D   x000D    BOOM  fully responsive

User · Answer

I noticed that leowebdev s post did seem to work on my end  however  it did knock out two elements of the site that I am trying to make   the scrolling and the footer   The scrolling I got back by adding a          scrolling  yes  To the iframe embed code   I am not sure if the footer is automatically knocked out because of the responsiveness or not  but hopefully someone else knows that answer

User · Answer

Try using this code to make it responsive  iframe  object  embed       max-width  100

User · Answer

DA is right  In your own fiddle  the iframe is indeed responsive  You can verify that in firebug by checking iframe box-sizing  But some elements inside that iframe is not responsive  so they  stick out  when window size is small  For example  div products-post-wrapper s width is 8800px

User · Answer

Simple  with CSS   iframe  width  100   max-width  800px   this can be anything you wish  to show  as default size       Please  note  But it won t make the content inside it responsive   2nd EDIT   There are two types of responsive iframes  depending on their inner content    one that is when the inside of the iframe only contains a video or an image or many vertically positioned  for which the above two-rows of CSS code is almost completely enough  and the aspect ratio has meaning     and the other is the   contact registration form type of content  where not the aspect ratio do we have to keep  but to prevent the scrollbar from appearing  and the content under-flowing the container  On mobile you don t see the scrollbar  you just scroll until you see the content  of the iframe   Of course you give it at least some kind of height  to make the content height adapt to the vertical space occurring on a narrower screen - with media queries  like  for example    media  max-width  640px   iframe  height  1200px   whatever you need  to make the scrollbar hide on testing  and the content of the iframe reveal  on mobile phone or other target devices          media  max-width  420px   iframe  height  1600px   and so on until and as needed

User · Answer

check out this solution    works for me    https   jsfiddle net y49jpdns    lt html lang  en  class  no-js  gt      lt head gt         lt meta charset  utf-8  gt         lt meta name  viewport  content  width device-width initial-scale 1 0  gt         lt style gt        html body  width  100  height  100  padding  0px margin  0px overflow  hidden font-family  arial font-size  10px color   6e6e6e background-color   000    preview-frame  width  100  background-color   fff   lt  style gt         lt script src    ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt         lt script gt           var calcHeight   function                    preview-frame   height   window  height                            document  ready function                calcHeight                              window  resize function                calcHeight                load function                calcHeight                        lt  script gt      lt  head gt      lt body gt         lt iframe id  preview-frame  src  http   leowebguy com   name  preview-frame  frameborder  0  noresize  noresize  gt         lt  iframe gt      lt  body gt   lt  html gt

User · Answer

I present to you The Incredible Singing Cat solution      wrapper       position  relative      padding-bottom  56 25      16 9        padding-top  25px      height  0     wrapper iframe       position  absolute      top  0      left  0      width  100       height  100       jsFiddle  http   jsfiddle net omarjuvera 8zkunqxy 2  As you move the window bar  you ll see iframe to responsively resize     Alternatively  you may also use the intrinsic ratio technique  - This is just an alternate option of the same solution above  tomato  tomato    iframe-container     overflow  hidden    padding-top  56 25     position  relative       iframe-container iframe     position  absolute    top  0    left  0    border  0    width  100     height  100

User · Answer

The code below will make the fixed width content of a non-responsive website within an iframe resize to the viewport width  only if its width is larger than the viewport width  For demo purposes the website is a single image 800 pixels wide  You can test by resizing your browser window or load the page in your phone   lt head gt   lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 quot  gt   lt style gt  body  html  width  100   height  100   margin  0  padding  0  iframe  width  100   transform-origin  left top    imgbox text-align center display block    lt  style gt   lt script type  quot text javascript quot  src  quot http   code jquery com jquery-1 11 1 js quot  gt  lt  script gt      lt script gt  jQuery document  ready function         nsZoomZoom           window  resize function             nsZoomZoom                function nsZoomZoom            htmlWidth      html   innerWidth            iframeWidth   800          if  htmlWidth  gt  iframeWidth              scale   1          else               scale   htmlWidth    iframeWidth                         quot iframe quot   css  transform    scale     scale                    quot iframe quot   css  width    800                 lt  script gt   lt  head gt   lt body gt   lt div class imgbox gt       lt iframe src  quot http   placekitten com g 800 600 quot  scrolling no width 800 height 600 frameborder no gt  lt  iframe gt   lt  div gt   lt  body gt

[css] Making an iframe responsive

Examples related to css

Examples related to iframe

Examples related to responsive-design