Rectangle 27 0

css Making an iframe responsive?


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.

Note
Rectangle 27 0

css Making an iframe responsive?



                                                        
$('#myIframeID').responsiveIframe({ xdomain: '*'});
$(function(){
});
;(function($){
ri.allowResponsiveEmbedding();
var ri = responsiveIframe();
})(jQuery);
<!-- Activate responsiveness in the "child" page -->
<!-- Corresponding code in the "parent" page -->
</script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>

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.

Note
Rectangle 27 0

css Making an iframe responsive?


<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
Note
Rectangle 27 0

css Making an iframe responsive?


iframe, object, embed {
    max-width: 100%;
}

You are not adjusting the height of the container with this code.

Note
Rectangle 27 0

css Making an iframe responsive?


.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

Note
Rectangle 27 0

css Making an iframe responsive?


<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.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%;
}

Its very useful and easy to understand. All you need to create

Note
Rectangle 27 0

css Making an iframe responsive?


iframe{
  max-width: 100% !important;
}

this would be a better answer if you explained why it works

Note
Rectangle 27 0

css Making an iframe responsive?


.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
<div class="myIframe"> 
   <iframe> </iframe> 
</div>

I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:

This is a good starting point to making iframes scroll for sarafi and all devices. very sad though....

This is exactly what i needed to allow the iframe to scroll, as it was over 5000px long. The other codes forced the long iFrame to be overlaid the below content.

for 16:9, padding-bottom should be 56.25%

future note for me if content padding-bottom is ratio of content width, 800x600 is %75, 800x536 is %67

Note
Rectangle 27 0

css Making an iframe responsive?


For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

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%;
}
Note
Rectangle 27 0

css Making an iframe responsive?


<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      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;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebdev.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>

I've updated your fiddle since there were some wrong pieces here and there. It's the same,and it works the same but without confusing bits. jsfiddle.net/6NSX3/263

IOS does not calculate height correctly, it takes navigation bar into account. Also Iframe on IOS is not scrollable.

Note