cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Scaling iFrames</h1>
<p>Resize the browser window to see the iFrame getting scaled down.</p>
<iframe src="http://herschel666.github.io/stullen-blog/" allowfullscreen="true" allowtransparency="true"></iframe>
            
          
!
            
              body {
  padding: 1em 2em;
  background-color: #FFF;
  font: normal 100%/1.4 sans-serif;
  color: #515477;
  overflow-x: hidden;
}

h1, p {
  text-align: center;
}

h1 {
  margin: .2em 0 0 0;
  font-weight: normal;
}

p {
  margin: .1 0 2em 0;
}

iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 1px solid #666;
  box-sizing: border-box;
  transform-origin: center top;
  transition: transform .05s linear;
  backface-visibility: hidden;
}
            
          
!
            
              /**
 * Scaling <iframe>-elements.
 * 
 * Emanuel Kluge
 * twitter.com/Herschel_R
 */
(function (win, doc) {

  /** Below this point the scaling takes effect. */
  var BREAKPOINT = 1030;
  
  /**
   * The `window.resize`-callback gets throttled
   * to an interval of 30ms.
  */
  var THROTTLE = 30;
  
  /** Just the declaration. Definition comes later. */
  var IFRAME_HEIGHT;

  var iframe = doc.getElementsByTagName('iframe')[0],
      timestamp = 0;
  
  /** Defining the inital iframe-height. */
  IFRAME_HEIGHT = parseInt(getComputedStyle(iframe).height, 10);
  
  /**
   * Takes an object with CSS-transform-properties
   * and generates a cross-browser-ready style string.
   *
   * @param  {Object} obj
   * @return {String}
   */
  function transformStr(obj) {
    var obj = obj || {},
        val = '',
        j;
    for ( j in obj ) {
      val += j + '(' + obj[j] + ') ';
    }
    val += 'translateZ(0)';
    return '-webkit-transform: ' + val + '; ' +
            '-moz-transform: ' + val + '; ' +
            'transform: ' + val;
  }
  
  /**
   * Scaling the iframe if necessary.
   *
   * @return {Function}
   */
  function onResize() {
  
    var now = +new Date,
        winWidth = win.innerWidth,
        noResizing = winWidth > BREAKPOINT,
        scale,
        width,
        height,
        offsetLeft;
    
    if ( now - timestamp < THROTTLE || noResizing ) {
      /** Remove the style-attr if we're out of the "scaling-zone". */
      noResizing && iframe.hasAttribute('style') && iframe.removeAttribute('style');
      return onResize;
    }
    
    timestamp = now;
    
    /**
     * The required scaling; using `Math.pow` to get
     * a safely small enough value.
     */
    scale = Math.pow(winWidth / BREAKPOINT, 1.2);
    
    /**
     * To get the corresponding width that compensates
     * the shrinking and thus keeps the width of the
     * iframe consistent, we have to divide 100 by the
     * scale. This gives us the correct value in percent.
     */
    width = 100 / scale;
    
    /**
     * We're using the initial height and the compen-
     * sating width to compute the compensating height
     * in px.
     */
    height = IFRAME_HEIGHT / scale;
    
    /**
     * We have to correct the position of the iframe,
     * when changing its width.
     */
    offsetLeft = (width - 100) / 2;
    
    /** Setting the styles. */
    iframe.setAttribute('style', transformStr({
      scale: scale,
      translateX: '-' + offsetLeft + '%'
    }) + '; width: ' + width + '%; ' + 'height: ' + height + 'px');
    
    return onResize;
  
  }
  
  /** Listening to `window.resize`. */
  win.addEventListener('resize', onResize(), false);

})(window.self, document);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console